在React，componentDidUpdate或eventHandler中对事件进行API调用？

Question

理想情况下，在React中发生事件时应该在哪里放置api调用

在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的数据时适当地呈现...

---

（旁注：如果 requestDataActionDispatch导致组件状态改变，您可能希望在请求之前设置所选项目时清除该状态，因此您无需没有选择一个项目，但仍具有与上一个项目相关的状态。但是我猜测事实是props上没有该项目...）

Answer 2

取决于

但是一个简单的解决方案是，如果要在状态值更改后调用某个API，则必须使用eventHandler。还要检查setState中的callback。

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

Answer 3

这取决于

我希望在componentDidUpdate内部调用api。为什么呢因为它更干净。每当状态或道具发生变化时，就会调用componentDidUpdate。所以可以肯定，componentDidUpdate内必须有一个条件，就像您提到的

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