父组件状态变更时React子组件未重新渲染问题排查

核心问题 #

你遇到的组件不重新渲染的根本原因是：没有创建状态的新副本，直接修改了原状态的引用。

React的状态更新依赖于引用变化——只有当你通过setState传入一个全新的对象/数组时，React才会检测到状态发生了变更，进而触发组件的重新渲染。而你的代码中：

const newDishCards = dishCards;
newDishCards[currentTab].tabDishes.push(newDish);
setDishCards(newDishCards);

这行const newDishCards = dishCards;并没有复制原数组，只是把原状态数组的引用赋值给了新变量。后续的push操作直接修改了原状态对象的内容，最后调用setDishCards时传入的还是原来的引用，React会认为状态没有变化，因此不会触发重新渲染。

正确的状态更新方式 #

要解决这个问题，你需要创建状态的深层副本，确保每一层嵌套的对象/数组都有新的引用。以下是针对你的代码的修改方案：

function handleNewDish() {
  const newDish = {
    dishName: `Dish ${dishCards[currentTab].tabDishes.length + 1}`,
    dishPrice: '',
    vegan: false,
    vegetarian: false,
    spicy: 0
  };

  // 遍历原数组，创建新的数组副本
  const newDishCards = dishCards.map((tab, index) => {
    // 只更新当前选中的tab
    if (index === currentTab) {
      // 返回新的tab对象，包含新的tabDishes数组
      return {
        ...tab, // 复制原tab的其他属性
        tabDishes: [...tab.tabDishes, newDish] // 创建新的tabDishes数组并添加新菜品
      };
    }
    // 其他tab直接返回原对象即可
    return tab;
  });

  setDishCards(newDishCards);
}

为什么这样有效？ #

• 通过map创建了一个全新的dishCards数组副本
• 对于需要更新的tab，使用扩展运算符...tab创建了新的tab对象，避免修改原对象
• 对于tabDishes，同样用[...tab.tabDishes, newDish]创建了新的数组，添加新菜品的同时保留原数据

这样更新状态后，React能检测到dishCards的引用发生了变化，就会触发所有依赖该状态的组件（包括Accordion）重新渲染，新的菜品项就能立即显示出来了。

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