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

Question

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

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

我想映射所有对象并检查每个对象 nutrientName 如果它匹配特定关键字我想用我的 excel [=27= 中的相应关键字重命名键] 并保存它的值。

在这种情况下，结果将是 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

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

Answer 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;

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

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

How to add new keys to the object with matching condition without mutating the state?

loops

object

switch-statement

reactjs

react-hooks