API 调用 react、componentDidUpdate 或 eventHandler 中的事件？答案

【问题标题】：API call on event in react, componentDidUpdate or eventHandler?API 调用 react、componentDidUpdate 或 eventHandler 中的事件？
【发布时间】：2019-06-26 09:50:12
【问题描述】：

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

在eventHandler 或componentDidUpdate 内？

示例：

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);
  }
}

【问题讨论】：

标签： javascript reactjs rest asynchronous react-lifecycle

【解决方案1】：

取决于

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

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

【讨论】：

在触发数据请求之前没有看到任何特殊需要等待状态更新。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

视情况而定

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

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

【讨论】：