Конструктор react.js вызывается дважды
У меня есть список сообщений, и я пытаюсь вызвать действие внутри конструктора или componentDidMount для каждого сообщения. Но каким-то образом, когда я отправляю новое сообщение, конструктор и функции componentDidMount вызываются дважды.
constructor(props) {
super(props);
if (condition1) {
this.props.actions.action1();
} else if (condition2) {
this.props.actions.action2();
}
}
Эти функции вызываются только один раз, когда сообщения считываются из списка. Но когда я отправляю новое сообщение, они вызываются дважды.
Как я могу избежать этих ситуаций. Я попытался использовать функцию componendDidUpdate следующим образом:
componentDidUpdate(prevProps, prevState) {
if (prevProps.post.id !== this.props.post.id) {
if (condition1) {
this.props.actions.action1();
} else if (condition2) {
this.props.actions.action2();
}
}
}
Да, я уверен. При отправке сообщения я не вижу более одного компонента
такая же проблема у меня. Как вы нашли решения @burakunlu
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ну, когда ваш конструктор и ваша функция componentDidMount срабатывают дважды, вы можете быть уверены, что рассматриваемый компонент где-то создается дважды.
Если вы не используете StrictMode (если используете, см. ответ papacool: это по дизайну), когда код в конструкторе запускается дважды, вы можете быть уверены, что компонент создается заново два раза. Это может произойти по разным причинам, самая простая причина, вероятно, заключается в том, что компонент используется в нескольких местах:
<MyComponent />
<MyComponent />
Другая причина может заключаться в том, что у вас есть условный рендеринг, то есть, возможно, вы рендерите на основе логического значения, которое изменяется:
{ myBoolean && <MyComponent /> }
Если вы переключите myBoolean два раза, конструктор будет выполнен два раза.
Конструктор React вызывается дважды в строгом режиме. https://stackoverflow.com/a/61443443/6014725
Это не ошибка, а специальное поведение, обеспечивающее чистоту конструктора. https://github.com/facebook/react/issues/12856#issuecomment-613145789
Узнайте больше с https://reactjs.org/docs/strict-mode.html
Это отличный ответ. Это был неудачный выбор дизайна.
Странно, убедитесь, что вы не используете компонент дважды?