React render未更新 子组件接收props始终为undefined如何解决

• 状态更新时未变更数组引用：如果你在fetchBuildings请求成功后，直接修改原buildings数组（比如用push、splice等方法修改原数组后直接setState({buildings: buildings})），数组的内存引用没有发生变化，子组件做浅比较时会判断prop没有变化，跳过渲染。
• 子组件更新拦截逻辑问题：如果子组件是React.PureComponent、用React.memo包裹的函数组件，或者自定义了shouldComponentUpdate逻辑，默认只会做prop的浅比较，父组件传的buildings引用没有变化的话，子组件会跳过渲染，始终拿到初始的undefined值。
• 初始currentPage索引越界：你初始化state时currentPage默认值如果设置为大于等于分块后数组的长度，比如默认设为1，但请求回来的数据只够分1块（仅索引0有值），会导致this.state.buildings[this.state.currentPage]始终为undefined。

1. 确保更新state时传入新的数组引用 #

修改fetchBuildings中更新state的逻辑，不要修改原数组，每次都传入新数组：

// 错误写法
this.state.buildings.push(chunkData);
this.setState({ buildings: this.state.buildings });

// 正确写法
this.setState(prev => ({
  buildings: [...prev.buildings, chunkData]
}));

2. 渲染前做值兜底，同时校验currentPage合法性 #

父组件传值时增加兜底判断，避免传undefined给子组件，同时初始化currentPage时默认设为0，切换页码时做边界判断：

// 父组件render中传值写法
<TableContent 
  buildings={this.state.buildings[this.state.currentPage] || []}
  // 其他props
/>

3. 校验子组件更新逻辑 #

如果子组件使用了React.PureComponent或React.memo，确认不需要额外自定义比较逻辑；如果自定义了shouldComponentUpdate，确保把buildings prop加入比较条件。如果不需要特殊性能优化，直接改用普通的React.Component/普通函数组件即可避免浅比较导致的更新跳过问题。

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