React父组件向Comment子组件传值时读取commentList未定义报错如何解决

你出现报错的核心是属性拼写错误：

• React类组件中存储状态的属性是this.state（单数），你在调用Comment组件传值时错误写成了复数this.states，this.states本身是undefined，读取它的commentList属性就会抛出你看到的报错。

找到父组件Feed中调用Comment的代码行：

<Comment commentAddList={this.states.commentList} />

修改为：

<Comment commentAddList={this.state.commentList} />

为了避免后续类似场景出现报错，可以给Comment组件加参数兜底逻辑：

{this.props.commentAddList?.map((comm, idx) => {
  return <li key={idx}>{comm}</li>;
})}

这里用了可选链运算符?.，即使commentAddList未正确传入为undefined，也不会抛出读取属性的错误。

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