React中使用useState更新fruits数组内dietary的count值问题求助

问题分析 #

你当前的handleIncrementCount函数存在几个关键错误：

• 逻辑判断错误：dietary_index === food[index]完全不匹配需求，food是数组中的水果对象，index是该水果在foods数组中的索引，和传入的dietary_index（dietary子数组的索引）没有关联。
• 目标属性错误：你试图修改food的qty和count，但实际要更新的是food.dietary子数组中对应索引元素的count。
• 嵌套数组更新方式错误：React状态更新需要保持不可变性，直接修改原数组元素不会触发视图更新，必须逐层复制新对象。

正确实现代码 #

const handleIncrementCount = (foodIndex, dietaryIndex) => {
  setFood(prevFoods => {
    // 复制原数组，避免直接修改原状态
    return prevFoods.map((food, idx) => {
      // 找到要修改的水果对象
      if (idx === foodIndex) {
        // 复制该水果对象，然后处理dietary数组
        return {
          ...food,
          dietary: food.dietary.map((item, dIdx) => {
            // 找到要递增count的dietary元素
            if (dIdx === dietaryIndex) {
              return { ...item, count: item.count + 1 };
            }
            return item;
          })
        };
      }
      return food;
    });
  });
};

调用说明 #

在循环渲染视图时，需要同时传递当前水果在foods数组的索引和该dietary元素的索引：

{foods.map((food, foodIdx) => (
  <div key={food.id}>
    <h3>{food.name}</h3>
    {food.dietary.map((item, dIdx) => (
      <div key={item.id}>
        <span>Count: {item.count}</span>
        <button onClick={() => handleIncrementCount(foodIdx, dIdx)}>
          +1
        </button>
      </div>
    ))}
  </div>
))}

关键细节解释 #

• 不可变性处理：每次更新都通过扩展运算符...复制原对象/数组，确保不会修改原状态，触发React的重新渲染。
• 双重map遍历：外层map遍历foods数组找到目标水果，内层map遍历该水果的dietary数组找到要更新的元素，只修改目标元素的count值。
• 索引传递：必须同时传递水果的索引和dietary元素的索引，才能精准定位到要更新的count属性。

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