如何在不改变状态的情况下向具有匹配条件的对象添加新键？答案

【问题标题】：How to add new keys to the object with matching condition without mutating the state?如何在不改变状态的情况下向具有匹配条件的对象添加新键？
【发布时间】：2021-03-20 05:40:12
【问题描述】：

我有一组看起来像这样的对象

foodNutrients: Array(85)
{nutrientId: 1008, nutrientName: "Energy", unitName: "KCAL" value: 400,}
...

我想映射所有对象，并为每个对象检查 nutrientName 是否匹配特定关键字我想用我的 excel 表中的相应关键字重命名键并保存它的值。

在这种情况下，结果将是Energy_100g: 400。

然后我想循环剩余的 85 个对象并将它们全部添加到下面的状态。

const [convertedIngredients, setConvertedIngredients] = useState({
    product_name: "",
    nutriments: {},
    serving_size: "",
    serving_quantity: "",
  });

selectedItem.foodNutrients.map((foodNutrient) => {
      switch (foodNutrient.nutrientName) {
        case "Energy":
          setConvertedIngredients((prev) => ({
            ...prev,
            nutriments: {
              Energy_100g: foodNutrient.value,
            },
          }));
          break;
plus another 100+ cases

我希望用 85 个新键填充我的状态 nutriments 对象，但我只得到 1 个，因为每个循环都会覆盖它。

【问题讨论】：

稍微颠倒你的逻辑。与其为每个需要更新的对象设置状态，不如创建一个新数组并使用新数组更新状态

标签： reactjs loops object react-hooks switch-statement

【解决方案1】：

这可能有助于解决您的问题。

selectedItem.foodNutrients.map((foodNutrient) => {
      switch (foodNutrient.nutrientName) {
        case "Energy":
          setConvertedIngredients((prev) => ({
            ...prev,
            nutriments: {
              ...prev.nutriments,
              Energy_100g: foodNutrient.value,
            },
          }));
          break;

但即使在这种情况下，您也必须记住对象中的每个键都必须是唯一的，如果您尝试插入重复项，它会写入现有的键。或者，如果您希望在同一个键下有多个值，您也可以这样做。

selectedItem.foodNutrients.map((foodNutrient) => {
      switch (foodNutrient.nutrientName) {
        case "Energy":
          setConvertedIngredients((prev) => prev.nutriments.hasOwnProperty('Energy_100g') ? {
            ...prev,
            nutriments: {
              ...prev.nutriments,
              Energy_100g: [...prev.nutriments.Energy_100g, foodNutrient.value],
            },
          } : {
                ...prev,
                nutriments: {
                  ...prev.nutriments,
                  Energy_100g: [foodNutrient.value],
                },
              });
          break;

请原谅并忽略上述任何导致语法错误的错字。干杯，

【讨论】：