Question

我是React的新手，请多多包涵。我有一个调用另一个带有属性的组件的组件。此属性将在函数的回调中获取其值，如下所示：

render(){
  myFunc((p) => {
    if(!_.isEqual(p, this.state.myProp))
      this.setState({myProp: p})
  });
  return <MyComponent myProp={this.state.myProp}/> 
}

myFunc会或不会发出API请求，并且视情况而定会迟早调用回调。当发出API请求并且回调需要更长的时间才能返回时，这似乎很好用。但是，当不需要该请求并且回调立即（或几乎）返回时，我得到了Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. 我做错了什么，解决这个问题的正确方法是什么？放置此代码的正确位置在哪里？基本上，如果this.state.myProp发生更改，我需要重新渲染MyComponenent

Answer 1

您不应该在setState方法内调用render，否则可能会遇到无限循环。对myFunc的调用应该在其他地方（取决于您的业务逻辑）。函数完成后，它将更新状态，然后触发重新渲染，因此MyComponent将获得最新值。

更新

我不知道哪些条件需要再次调用myFunc，但您可以这样做：

state = {
  myProp: null // or some other value that MyComponent can handle as a null state
}

componentDidMount () {
  myFunc((p) => {
    if(!_.isEqual(p, this.state.myProp)) // This is needed only if you get null back from the callback and you don't want to perform an unnecesary state update
      this.setState({myProp: p})
  }
}

render(){
  const { myProp } = this.state
  // You can also do if (!myProp) return null  
  return <MyComponent myProp={myProp}/> 
}

在异步函数的回调中设置状态

1 个答案: