使用React和Firebase开发待办列表时如何渲染两个输入框的数据

问题根因 #

你遇到的问题由两个核心错误导致：

• 从Firestore拉取数据时未提取title字段：useEffect的快照处理逻辑中，仅将id和todo字段存入todos数组，title字段直接被遗漏，所以todos数组中的每个元素本身就不存在title属性，自然无法渲染。
• map遍历参数定义错误：todos.map((todo, title) =>的第二个参数是数组遍历的索引值，不是你以为的title字段，属于对数组遍历方法的逻辑误解。

修复步骤 #

1. 补全Firestore数据拉取逻辑 #

修改父组件AddLink.js中useEffect的代码，把title字段也存入todos数组：

useEffect(() => {
  db.collection("links")
    .orderBy("timestamp", "desc")
    .onSnapshot((snapshot) => {
      setTodos(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          todo: doc.data().todo,
          title: doc.data().title // 新增该行，补全title字段的提取
        }))
      );
    });
}, []);

2. 修正遍历逻辑，规范props传递 #

修改父组件遍历渲染Todo组件的代码，修正参数写法，避免变量重名导致的逻辑混淆：

{todos.map((todoItem) => (
  // 直接传递整个todo对象即可，不用拆分属性，逻辑更简洁
  <Todo todo={todoItem} key={todoItem.id} />
))}

3. 子组件保持原有逻辑即可 #

你现有子组件的取值逻辑props.todo.title、props.todo.todo和上面的传参方式完全匹配，不需要额外修改，直接就能正常读取两个字段的值渲染。

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