当父组件更新状态后，子组件却毫无反应，许多开发者第一反应是React出了Bug？其实不然，更常见的症结在于上下游数据结构没有对齐——属性名写错了，导致子组件根本读不到预期的字段。最终渲染结果要么空白一片，要么静默失败，看不出任何错误提示。

在Todo应用这类典型场景中，TaskApp作为父组件，通过useState管理任务列表，再将tasks数组作为prop传递给TaskList子组件。按照正常逻辑，每次调用setTasks后，TaskList都应该接收到一个新数组，并触发重新渲染——React的执行流程确实如此。但问题的核心在于：子组件必须能正确读取渲染所需的数据字段，否则一切都将失效。

那么问题究竟出在哪？我们来逐一拆解。初始数据使用的是text字段（例如 { id: 10, text: "Visit Paris", done: false }），可在新增任务时，却错误地写成了task: text：

// ❌ 错误写法：字段名不一致
{
  id: nextId++,
  task: text, // ← 这里本应是 text，却写成了 task
  done: false
}

问题在于，新增的任务对象中根本没有text这个属性。而TaskList组件在map循环中，仍然固执地尝试访问task.text：

{tasks.map((task) => (
  

    {task.text} {/* ← 这里读取的是 task.text，但新加的任务只有 task.task */}
  
))}

结果就是，新增的那一条渲染出来是undefined，看起来就像“没更新”，但其实是渲染成了空白内容。使用React DevTools检查后会发现，状态确实已经更新了——这说明父组件的状态变更和子组件的重新渲染都已按部就班执行。只是由于字段名不匹配，文本内容无法正常显示。

✅ 修复方案也很简单，统一字段命名即可：

function handleAddTask(text) {
  setTasks((prevTasks) => [
    ...prevTasks,
    {
      id: nextId++,
      text, // ✅ 直接用解构赋值，语义也更清晰
      done: false
    }
  ]);
}

? 关键提醒：React的重新渲染机制依赖prop或state的引用变化（即产生新数组或新对象）。在这个例子中，setTasks确实返回了全新的数组，满足了触发条件。真正阻碍视觉更新的，是数据契约断裂——初始任务和新任务的字段不一致，这属于逻辑一致性问题，与React的生命周期或Hooks用法毫无关系。

此外，建议在项目中开启严格模式（Strict Mode），配上ESLint的react/prop-types规则，或者直接使用TypeScript。这类字段不匹配的风险，从工具层面就能提前拦截。归根结底，保持数据结构契约的统一，才是构建可维护React应用的底层基本功。