使用React和Firebase如何将两个输入框数据分别渲染到不同元素

问题原因 #

你在从Firestore拉取待办数据的环节，没有将存入的title字段读取到本地的todos状态数组中，所以即使数据已经成功写入数据库，渲染时也拿不到标题值。

修复步骤 #

1. 修改AddLink.js中useEffect内的快照处理逻辑，新增读取title字段的代码：

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. 清理AddLink.js中addTodo函数下方多余的/字符，避免语法报错。

可选优化 #

你当前渲染Todo组件时同时传递了todo对象和单独的title属性，但Todo组件内部是从props.todo.title取值，所以可以删掉多余的title={todo.title}属性传递，代码更简洁：

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

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