React教程中将this.state改为this.props.users报undefined错误

问题原因&解决方案 #

分两种对应场景处理：

场景1：你当前还是把用户数据存在Users组件内部state中（即你贴出的代码版本）

这个版本不会直接触发this.props.users is undefined报错，只会出现url字段不存在的问题，对应修改点：

• 你的state中定义的每个用户对象缺少url属性，按需补充即可
• 循环渲染必须添加key属性，否则会抛出React警告
• 建议调整参数命名避免重名混淆，语义更清晰：

// Users.js中修改map逻辑
{this.state.users.map(user => (
  <UserItem key={user.id} user={user} />
))}

// UserItem.js中对应调整取值
const { id, login, url } = this.props.user;

场景2：你已经删除了Users组件的内部state，改成从父组件通过props传入users数组

此时this.props.users is undefined的原因是调用Users组件的父组件没有传递users属性，修改方案：

• 将原来写在Users组件里的users数组挪到父组件的state中
• 父组件渲染Users时传递属性：

// 父组件render方法内
<Users users={this.state.users} />

通用规范修正

React要求组件名必须大写开头，你当前的users、userItem组件名和对应文件名均为小写，不符合规范，可能引发识别异常，建议统一修改为Users.js、UserItem.js，类名同步改为大写开头。

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