React更新State后组件未重新渲染问题求助（父子组件场景）

问题根源 #

子组件中useState的初始值仅在组件首次挂载时被赋值一次，后续父组件传递的props更新不会自动同步到子组件的本地状态里。当你点击编辑按钮更新本地状态后，若界面渲染依赖的是原始props而非更新后的本地state，就会出现控制台有新值但界面不更新的情况；而硬编码初始值时，状态完全由本地控制，更新后自然能正常渲染。

解决方案 #

根据业务场景，有几种常见处理方式：

1. 直接使用props（无需本地状态） #

如果子组件仅需展示数据或触发父组件的更新逻辑，无需维护本地状态，直接用props渲染即可：

// 子组件 ExpenseItem
function ExpenseItem({ expense, onEdit }) {
  const handleEdit = () => {
    // 调用父组件传递的回调，让父组件负责更新数据
    const updatedExpense = { ...expense, amount: expense.amount + 100 };
    onEdit(updatedExpense);
  };

  return (
    <div>
      <p>{expense.title}</p>
      <p>{expense.amount}</p>
      <button onClick={handleEdit}>编辑</button>
    </div>
  );
}

2. 用useEffect同步props到本地状态 #

如果必须维护子组件本地状态，需要通过useEffect监听props变化，同步更新本地状态：

// 子组件 ExpenseItem
import { useState, useEffect } from 'react';

function ExpenseItem({ initialExpense }) {
  const [expense, setExpense] = useState(initialExpense);

  // 监听initialExpense的变化，同步到本地状态
  useEffect(() => {
    setExpense(initialExpense);
  }, [initialExpense]);

  const handleEdit = () => {
    const updatedExpense = { ...expense, amount: expense.amount + 100 };
    setExpense(updatedExpense);
    console.log(updatedExpense);
  };

  return (
    <div>
      <p>{expense.title}</p>
      <p>{expense.amount}</p>
      <button onClick={handleEdit}>编辑</button>
    </div>
  );
}

3. 检查渲染逻辑的依赖对象 #

确保界面渲染的是更新后的本地state，而非原始props：

// 错误写法：渲染的是未更新的props
<p>{initialExpense.amount}</p>

// 正确写法：渲染本地更新后的state
<p>{expense.amount}</p>

额外注意事项 #

如果父组件传递的是引用类型数据（对象、数组），更新时要创建新的引用（比如用扩展运算符），否则useEffect的依赖项不会触发更新。示例父组件：

// 父组件 Expenses
function Expenses() {
  const [expenses, setExpenses] = useState([
    { id: 1, title: "房租", amount: 2000 }
  ]);

  const updateExpense = (updatedItem) => {
    setExpenses(prev => prev.map(item => 
      item.id === updatedItem.id ? updatedItem : item
    ));
  };

  return (
    <div>
      <ExpenseItem initialExpense={expenses[0]} onEdit={updateExpense} />
    </div>
  );
}

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