javascript - OnClick of Button called twice only when I first time click on it

Question

I am having a minor issue, I am creating a web application with integrated chat so when I have OnClick that listens for clicks and open the proper chat with user (I am calling it chatHead). When I open first chatHead it always gets called twice for some reason, first with it's normal and expected behaviour and the second time passing undefined as parameter. After this whenever I open some other chatHead I don't have a problem with this nor if I close the first chatHead and open it again. Application is working without crashing but my console displays an error and I just can't let it go :D. I know it's trivial but for some reason I can't figure out what it is. Below is the button I make for every chatHead with a clickListener.

<Accordion defaultActiveKey="-1">
  <Card>
    <Accordion.Collapse eventKey={conversation.id}>
      <Launcher
        isOpen={conversation.opened}
        agentProfile={{
          teamName: conversation.toProduct.userName,
          imageUrl:
            "https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
        }}
        onMessageWasSent={onAddMessage}
        messageList={messages}
      />
    </Accordion.Collapse>
    <Card.Header>
      <Accordion.Toggle
        as={Button}
        style={{ width: "100%" }}
        eventKey={conversation.id}
        onClick={() => props.openChat(conversation)}
      >
        {conversation.toProduct.userName}
      </Accordion.Toggle>
    </Card.Header>
  </Card>
</Accordion>

props.openChat is a action I am dispatching, I have used injectIntl in order to dispatch it. Conversation is object from list of conversations which parent component .maps and then sends to this component if you need to know but I think that this isn't so important for the problem.

Thank you all for your time

Answer 1

等待大神解答