为什么更新对象中的嵌套数组不会触发子组件重新渲染？

Question

在我的 React 应用程序中，我有一个页面，其中包含项目卡列表（每个卡都是一个单独的组件），并且在每张卡上我都有一个从项目的嵌套数组对象呈现的表格。当我通过使用更新的数组创建新项目并将新项目列表设置为状态来将元素添加到 item 中的嵌套数组时，它不会触发子组件中表的重新渲染。 这是我的代码的粗略示例：

父组件

const Items = () => {
  // Fetching items in useEffect via API call
  const [itemsList, setItemsList] = useState([]);
  
  // This method is called in this component to add row to an item,
  // but I did not include this part to keep the example concise.
  const addRowToItem = (row, itemId) => {
    setItemsList(itemsList.map((item) => {
      if (item.id === itemId) {
        return {...item, rows: item.rows.concat(row)};
      }
      return item;
    }
  }

  return (
    <div>
      {itemsList.map((item) => (
        <ItemCard item={item} />
      )}
    </div>
  );
}

子组件（ItemCard）

const ItemCard = (props) => {
  const [item, setItem] = useState(props.item);

  return (
    <div>
      {item.rows.map((row) => (
        // Table row  
      )}
    </div>
  );
}

Answer 1

您可以使用

useReducer

代替

useState

，或者在分配值时使用扩展运算符克隆状态对象，如下所示：

const addRowToItem = (row, itemId) => {
    setItemsList([...itemsList.map((item) => {
      if (item.id === itemId) {
        return {...item, rows: item.rows.concat(row)};
      }
      return item;
    }])
  }