IT技术 - 在react、componentDidUpdate 或 eventHandler 中对事件的 API 调用？ - 吾爱随笔录

IT技术 javascript reactjs rest asynchronous react-lifecycle

2021-05-09 16:42:27

理想情况下，我们应该在哪里放置在 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);
  }
}

3个回答

依靠

但是一个简单的解决方案是，如果您想在状态值更改后调用某些 API，那么您必须使用eventHandler. 还要检查callbackin setState。

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

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

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

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

我更愿意在里面调用 api componentDidUpdate。为什么？因为它更干净。每当 state 或 props 发生变化时，componentDidUpdate都会被调用。所以肯定的，里面必须有componentDidUpdate你提到的条件

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

其它你可能感兴趣的问题