站长
    首页 > 知道 > 站长 > 前端问题 > 正文

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

发布于 2022-01-16 13:25 分类：推广求助

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

但这回导致无限触发 shouldComponentUpdate

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

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

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

请问如何写呢？

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

回答3

最佳
  • @
    @89121100

    之所以无限触发,是因为你异步函数更新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
  • @
    @lsupper 
    static getDerivedStateFromProps(props, state)
    支持 0 反对 0 举报
    2022-01-16 14:58
  • @
    @wpfd 
    setTimeout(()=>{
    this.setState({
        key: value
    })
}, 0)
    支持 0 反对 0 举报
    2022-01-16 15:12