Вызов API на событие в реагировать, componentDidUpdate или eventHandler?

Question

Где мы должны в идеале сделать вызов API для выполнения события в React

Внутри eventHandler или componentDidUpdate?

пример:

handleItemClick = (item) => (event) => {
  this.setState({selectedItem: item});
  this.props.requestDataActionDispatch(item);
}

OR

componentDidUpdate(prevProps, prevState, snapshot) {
  if(prevState.item !== this.state.item) {
    this.props.requestDataActionDispatch(item);
  }
}

Answer 1

Зависит от

Но простое решение состоит в том, что если вы хотите вызвать какой-либо API после изменения значения состояния, тогда вам нужно перейти на eventHandler.Также проверьте для callback в setState.

handleItemClick = (item) => (event) => {
  this.setState({selectedItem: item}, () => this.props.requestData(item));
}

Answer 2

Я не вижу причин ждать обновления компонента, я просто поместил бы его в обработчик событий.

Естественно, в любом случае ваш компонент должен знать, как правильно отображать, когда у него есть выбранный элемент, но еще нет данных из API ...

---

(Примечание: Если requestDataActionDispatch приводит к изменению состояния вашего компонента, вы, вероятно, захотите очистить это состояние при установке выбранного элемента перед запросом, поэтому у вас его нет элемент выбран, но все еще имеет состояние, относящееся к предыдущему элементу, но я предполагаю, что на props он не ...)

Answer 3

Это зависит

Я бы предпочел вызвать API внутри componentDidUpdate.Зачем ?Потому что это чище.Всякий раз, когда происходит изменение состояния или реквизита, вызывается componentDidUpdate.Поэтому определенно должно быть условие внутри componentDidUpdate, как вы упомянули

if(prevState.item !== this.state.item)