React遍历渲染子组件时首个组件接收父组件state传值为null求助

问题原因 #

• 子组件错误将props传入的likestatus拷贝到自身state：constructor仅在组件首次挂载时执行一次，后续父组件更新likestatus props时，子组件自身state的likestatus不会自动同步。你场景中首次渲染时父组件feeds还未拿到接口返回的真实数据，首个子组件挂载时拿到的是初始state里的空值，后续接口数据更新后首个组件已经完成挂载，state没有同步导致出现null。
• 遍历渲染子组件时未添加唯一key属性，React虚拟DOM diff逻辑会优先复用已有组件实例，导致首个子组件一直复用首次挂载的旧实例，props更新没有触发状态同步。
• 父组件初始state的feeds数组默认带了一个IsLiked为空的占位元素，接口数据返回后如果是追加而非全量替换feeds，会保留首个占位元素对应的异常组件。

解决方案 #

1. 优先直接在子组件中使用this.props.likestatus取值，不要额外在子组件state存一份，从根源避免状态不同步的问题。如果确实需要在子组件state存储该值，添加componentDidUpdate钩子监听props变化同步更新：

componentDidUpdate(prevProps) {
  if (prevProps.likestatus !== this.props.likestatus) {
    this.setState({ likestatus: this.props.likestatus })
  }
}

2. 父组件遍历渲染Post组件时，添加唯一key属性，推荐用feed的唯一id作为key：

{this.state.feeds.map(item => (
  <Post
    key={item.id}
    likestatus={item.IsLiked}
    {/* 其余原有props保持不变 */}
  />
))}

3. 将父组件初始state的feeds设置为空数组，移除占位元素，等接口拿到完整feed数据后再赋值给state.feeds，避免首次渲染无效的占位组件：

this.state = {
  popupTrigger: false,
  feeds: [], // 改空数组
  likes: "",
  likebuton: false,
}

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