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

Question

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

但这回导致无限触发 shouldComponentUpdate

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

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

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

请问如何写呢？

Answer 1

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

// 假设 state 依赖 prop 中 id 的值
shouldComponentUpdate(nextProps) {
  if (nextProps.id !== this.props.id) {
    this.asyncFn()
    return false
  }
  return true
}

Answer 2

static getDerivedStateFromProps(props, state)

Answer 3

setTimeout(()=>{
    this.setState({
        key: value
    })
}, 0)