react 如何在 props 更新后执行一个函数更新 state 再渲染?

我尝试在 shouldComponentUpdate 返回 true 并执行一个方法更新 state,

但这回导致无限触发 shouldComponentUpdate

尝试下面这种写法也会无线触发 UNSAFE_componentWillUpdate

   UNSAFE_componentWillUpdate() {
     this.asyncFn(); // 这个函数会更新state
   }

场景是: state 是根据 prop 执行异步任务计算出来后的

请问如何写呢?

已解决 悬赏分:80 - 解决时间 2022-01-16 21:09
反对 0举报 0 收藏 0

回答3

最佳
  • @

    之所以无限触发,是因为你异步函数更新state时,又会重新触发shouldComponentUpdate,然后又执行异步函数,陷入无限循环中,你应该加个判断,判断只有当prop发生变化时,才去执行异步函数.

    // 假设 state 依赖 prop 中 id 的值
    shouldComponentUpdate(nextProps) {
      if (nextProps.id !== this.props.id) {
        this.asyncFn()
        return false
      }
      return true
    }
    支持 0 反对 0 举报
    2022-01-16 14:03
  • @
    static getDerivedStateFromProps(props, state)
    支持 0 反对 0 举报
    2022-01-16 14:58
  • @
    setTimeout(()=>{
        this.setState({
            key: value
        })
    }, 0)
    支持 0 反对 0 举报
    2022-01-16 15:12