React父组件状态更新未触发子组件重渲染问题咨询

问题根因 #

React 基于状态的引用变化判断是否触发重渲染，你两个方法对数组的处理逻辑差异直接导致了表现不同：

• removeApi 方法使用filter处理数组，filter会返回全新的数组实例，和原apiArray的引用地址完全不同，父组件执行setState后状态引用变化，子组件接收到新的props就会正常触发重渲染。
• addApi 方法使用push直接修改 props 传入的原数组，数组本身的引用地址没有发生变化，你把修改后的原数组传给setState时，React 会认为状态没有更新，直接跳过重渲染流程，所以子组件看不到新增内容，只有手动重载组件重新读取状态才能看到变更。

修复方案 #

修改addApi逻辑，不要直接修改原数组，先浅拷贝生成新数组再操作：

addApi = () => {
  let { apiArray } = this.props
  const id = uniqid();
  let obj = { id }
  // 浅拷贝原数组生成新实例，保证引用变化
  const newApiArray = [...apiArray, obj]
  this.props.updateStateFromChild('api', 'updateObject', newApiArray)
};

额外遗留问题提示 #

父组件updateStateFromChild方法中存在未定义变量的bug：

// 这里的id变量没有声明定义，后续用到这段逻辑时会运行报错
let idx = apiArray.findIndex((q)  => q.id === id)

如果后续需要用到这个索引逻辑，记得补充id的参数传递。

内容的提问来源于stack exchange，提问作者Shivang Chauhan