如何将列表遍历中定义的key作为prop传递给Modal组件

问题根源 #

1. React 中的key是框架内置的特殊属性，仅用于内部列表渲染的diff优化，无法作为普通prop被读取使用，就算你给li绑定了key也不能直接获取这个值做业务用途。
2. 你的Modal组件写在reposit.map循环的外部，不在循环的作用域范围内，自然无法直接访问到循环内部的item变量，你写的my_key={key}里的key属于未定义变量，肯定传不了值。

解决方案 #

步骤1：新增状态存储当前选中的仓库ID #

在你的组件原有状态基础上新增一个状态，用来记录用户点击的仓库ID：

const [selectedRepoId, setSelectedRepoId] = useState(null);

步骤2：修改列表点击事件，存入选中ID #

修改循环内li的点击逻辑，点击时把当前项的ID存入新增的状态里：

{reposit.map((item) => (  
  <li 
    key={item.id} 
    onClick={() => {
      setSelectedRepoId(item.id);
      setOpenModal(true);
    }}
  >
    <i className="folder icon" /> {item.name}
  </li>
))}

步骤3：修改Modal传参 #

把存储的选中ID作为prop传给Modal即可：

{openModal && <Modal repo={reposit} my_key={selectedRepoId} setOpenModal={setOpenModal}/> }

补充说明 #

如果Modal内部需要用到当前点击仓库的完整信息，你也可以直接存储整个item对象，不用单独存ID：

// 存整个选中的仓库对象
const [selectedRepo, setSelectedRepo] = useState(null);

// 点击时赋值
onClick={() => {
  setSelectedRepo(item);
  setOpenModal(true);
}}

// 传参给Modal
<Modal selectedRepo={selectedRepo} setOpenModal={setOpenModal}/>

内容的提问来源于stack exchange，提问作者Mourad Over Flow