React中跨文件遍历对象数组渲染子组件时props与key报错如何解决

1. 修复子组件Props接收错误 #

React组件的所有入参都会被聚合为单个props对象，你当前子组件的参数写法是错误的，无法正确获取父组件传递的属性，这是editingMemberName is undefined报错的核心原因。
修改子组件的参数写法，用解构语法获取属性：

// 修改前
export const MemberItem = (
  member,
  index,
  editingMemberName,
  editMemberName,
  handleChangeName,
  updateMemberName,
  cancelEditMemberName,
  destroyMember
  ) => {

// 修改后
export const MemberItem = ({
  member,
  index,
  editingMemberName,
  editMemberName,
  handleChangeName,
  updateMemberName,
  cancelEditMemberName,
  destroyMember
}) => {

2. 修正editingMemberName的调用逻辑 #

你在父组件传递props时，已经传的是当前项对应的布尔值editingMemberName={editingMemberName[index]}，子组件内直接用变量判断即可，不需要再加[index]取值，布尔值作为数组取下标自然会返回undefined，也是报错诱因之一：

// 修改前
{editingMemberName[index] ? (xxx) : (xxx)}

// 修改后
{editingMemberName ? (xxx) : (xxx)}

子组件内所有editingMemberName[index]都要按照上面的规则修改。

3. 修复key警告 #

React要求列表循环生成的直接子元素必须加唯一key，你现在把key写在了子组件内部的根div上，React无法识别，需要把key移到父组件map时的MemberItem组件上：

// 父组件Members.js的map逻辑修改
const memberItems = members.map((member, index) => {
  return (
    <MemberItem
      key={member.id} // 在这里加key
      member={member}
      index={index}
      editingMemberName={editingMemberName[index]}
      editMemberName={editMemberName}
      handleChangeName={handleChangeName}
      updateMemberName={updateMemberName}
      cancelEditMemberName={cancelEditMemberName}
      destroyMember={destroyMember}
    />
  )
})

子组件内部的div上的key={member.id}可以删掉。

其他注意事项 #

• 你当前父组件代码里没有声明members、handleChangeName、destroyMember三个变量/函数，需要确认是否漏写，否则运行还会报对应undefined错误
• 父组件return里直接写{memberItems}是不合法的，需要用一个根元素包裹，比如<>{memberItems}</>或者<div>{memberItems}</div>

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