Компоненты React: DidUpdate и обратный вызов SetState
Если я запускаю этот код, я получаю бесконечный цикл в componentDidMount, добавление оператора if в (prevState !== this.state) тоже не помогает.
state = {
purchaseable: false,
totalPrice: 0
}
updatePurchaseState = () => ({
purchaseable: true
});
addIngredientHandler = (type) => {
const newPrice = totalPrice + 1
this.setState({
totalPrice: newPrice
});
}
componentDidUpdate (prevProps, prevState) {
this.updatePurchaseState()
}
Но если я выполняю updatePurchaseState в обратном вызове setState, все работает нормально:
addIngredientHandler = () => {
let newPrice = newPrice +1
this.setState(() => ({
totalPrice: newPrice
}), () => this.updatePurchaseState());
}
Согласно документации React, https://reactjs.org/docs/react-component.html#setstatecomponentDidUpdate является предпочтительным способом выполнения updatePurchaseState.
Почему componentDidUpdate заходит в бесконечный цикл, а обратный вызов setState - нет, если оба состояния обновляют и должны повторно визуализироваться?
Как лучше всего вызвать в updatePurchaseState?
Как вы думаете, что делает ваш updatePurchaseState?
Это всего лишь образец кода, который не делает ничего ценного. Он используется только для понимания общей идеи componentDidUpdate.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Каждый раз, когда вы обновляете состояние или свойства компонента, компонент будет повторно визуализировать и вызывать componentDidUpdate. Таким образом, обе функции addIngredientHandler и updatePurchaseState будут вызывать вызов componentDidUpdate. В componentDidUpdate вы снова пытаетесь вызвать updatePurchaseState, вызывая бесконечный цикл.
Чтобы сделать это правильно, в componentDidUpdate вы должны проверить, следует ли вызывать updatePurchaseState, сравнивая текущее состояние с предыдущим состоянием:
componentDidUpdate (prevProps, prevState) {
if (this.state.purchaseable !== prevState.purchaseable) {
this.updatePurchaseState()
}
}
Пожалуйста, прочтите официальный документ React для получения более подробной информации.
можете ли вы опубликовать весь класс компонента, а также то, что вы ожидаете от компонента