React中点击按钮渲染列表时如何解决key prop缺失报错

1. 修复Missing "key" prop for element in iterator报错 #

React在渲染数组生成的列表项时，需要给每一个列表项绑定唯一的key属性，用于识别不同项的变化，优化重渲染性能。
你从Firebase拉取待办数据时，已经将每条数据的唯一文档ID存入了todo.id字段，直接将这个ID作为key绑定到Todo组件即可，修改代码如下：

// AddLink.js中原来的map遍历部分修改为
{todos.map((todo) => (
  <Todo todo={todo} key={todo.id} />
))}

注意：不要使用map方法的索引参数作为key值，当列表发生增删、排序操作时，索引的变动会导致React识别列表项异常，引发渲染错误。

2. 修复Todo组件内容不显示问题 #

你当前给Todo组件传递的props是todo={todo}，但Todo组件内部读取的是props.text，该属性不存在，会导致待办内容渲染为空，有两种修复方案可选：

方案一：修改Todo组件的取值逻辑 #

修改Todo.js代码，直接从传入的todo对象中读取待办内容：

import React from "react";

function Todo(props) {
  return (
    <div>
      <li>{props.todo.todo}</li>
    </div>
  );
}

export default Todo;

方案二：修改传值逻辑，直接传入文本 #

修改AddLink.js中的传值代码，不需要传递整个todo对象，直接传递待办文本，无需修改Todo组件：

{todos.map((todo) => (
  <Todo text={todo.todo} key={todo.id} />
))}

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