React开发Todo清单时输入的待办内容无法在Todo组件段落渲染如何解决

问题根因 #

父子组件传参的属性名不匹配，导致子组件无法读取到待办内容：
你在父组件AddLink中给Todo组件传递的是名为todo的props，该props对应的值是包含id和todo两个字段的对象，但Todo组件的段落标签中读取的是不存在的props.value，因此渲染为空。

修复方案 #

方案1（仅修改子组件，改动最小） #

将Todo.js里段落标签的取值逻辑修改即可：
把 <p>{props.value}</p> 替换为 <p>{props.todo.todo}</p>
（props.todo是父组件传递的待办对象，.todo是你存储待办文本内容的字段）

方案2（调整传参逻辑，语义更清晰） #

1. 修改父组件AddLink中渲染Todo列表的代码：

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

2. 同步修改Todo.js中的删除逻辑：
   把 db.collection("links").doc(props.todo.id).delete(); 替换为 db.collection("links").doc(props.id).delete();
   修改后原来的props.value就可以正常读取到待办内容。

额外优化建议 #

不要使用数组索引作为列表项的key，改为使用todo本身的唯一id，避免列表增删时出现渲染错乱。

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