javascript - API 调用 react、componentDidUpdate 或 eventHandler 中的事件？

Question

理想情况下，我们应该在哪里放置一个在 React 中发生事件时进行的 api 调用

在eventHandlerorcomponentDidUpdate里面

例子：

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

或者

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

score 1 · Accepted Answer

我没有看到任何等待组件更新的理由，我只是将它放在事件处理程序中。

自然，在任何一种情况下，您的组件都需要知道如何在具有选定项但还没有来自 API 的数据时正确呈现...

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

score 1 · Accepted Answer

要看

但一个简单的解决方案是，如果你想在 state 值改变后调用一些 API，那么你必须使用eventHandler. 还要检查callback.setState

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

score 0 · Accepted Answer

我宁愿调用里面的 api componentDidUpdate。为什么？因为它更干净。每当状态或道具发生变化时，componentDidUpdate都会被调用。componentDidUpdate所以肯定的是，就像你提到的那样，里面一定有一个条件

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

3 回答 3