Блог

Главная - Вопросы по программированию - Как добавить новые ключи к объекту с соответствующим условием без изменения состояния?

Как добавить новые ключи к объекту с соответствующим условием без изменения состояния?

#reactjs #loops #object #react-hooks #switch-statement

#reactjs #циклы #объект #реагирующие хуки #switch-statement

Вопрос:

У меня есть массив объектов, который выглядит следующим образом

 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

Я хочу, чтобы мой nutriments объект состояния был заполнен 85 новыми ключами, но я получаю только 1, потому что каждый цикл перезаписывает его.

Комментарии:

1. Немного инвертируйте свою логику. Вместо установки состояния для каждого объекта, который нуждается в обновлении, создайте новый массив и обновите состояние с помощью нового массива

Ответ №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;

простите и игнорируйте любую опечатку выше, которая приводит к синтаксической ошибке.
Приветствия,