Блог

Главная - Вопросы по программированию - Как мне обновить состояние объекта с сохранением существующих элементов с помощью useState hook?

Как мне обновить состояние объекта с сохранением существующих элементов с помощью useState hook?

#javascript #reactjs #react-hooks #use-state

#javascript #reactjs #реагирующие хуки #use-state

Вопрос:

У меня есть массив объектов:

 // seedColors.js

export default [
  {
    paletteName: "Material UI Colors",
    colors: [
      { name: "red", color: "#F44336" },
      { name: "pink", color: "#E91E63" },
    ]
  },
  {
    paletteName: "Flat UI Colors v1",
    colors: [
      { name: "Turquoise", color: "#1abc9c" },
      { name: "Emerald", color: "#2ecc71" },
    ]
  }
]

В моем app.js файл, я создаю новый массив объектов, как бы я добавил новый объект к существующему объекту, используя useState hook?

 // app.js

import seedColors from "./seedColors";

function App() {
  const [palettes, setPalettes] = useState({ palettes: seedColors });

  const savePalette = (newPalette) => {
    // newPalette = { paletteName: "New Test Palette", colors: [{ color: "blue", name: "blue" }] };
    setPalettes({ ...palettes, palettes: newPalettes });
  };

Это не обновление исходного состояния объекта, вместо этого происходит сбой приложения

Я бы хотел, чтобы состояние было обновлено до:

 [
  {
    paletteName: "Material UI Colors",
    colors: [
      { name: "red", color: "#F44336" },
      { name: "pink", color: "#E91E63" },
    ]
  },
  {
    paletteName: "Flat UI Colors v1",
    colors: [
      { name: "Turquoise", color: "#1abc9c" },
      { name: "Emerald", color: "#2ecc71" },
    ]
  },
  { 
    paletteName: "New Test Palette", 
    colors: [
      { color: "blue", name: "blue" },
    ] 
  },
]

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

1. setPalettes({ ...palettes, newPalettes });

2. Спасибо за ответ, когда я делаю это, он создает новый объект вне исходного массива объектов. Новая палитра: цвета: (2) [{…}, {…}] paletteName: «Новая тестовая палитра» прототип : Палитры объектов: Массив (2) 0: {paletteName: «Цвета пользовательского интерфейса материала», цвета: Массив (2) 1: {paletteName: «Плоские цвета пользовательского интерфейса v1», цвета: массив (2)

3. Просто для подтверждения, ваше текущее значение состояния не является массивом, и вы хотите, чтобы обновленное значение было массивом?

Ответ №1:

Ваше приложение, вероятно, «сбой», потому что у вас опечатка:

  setPalettes({ ...palettes, palettes: newPalettes });
 //                                             ^

У вас нет переменной с именем newPalettes . Но даже если вы это исправите, это не даст желаемого результата.

Есть ли причина, по которой вы устанавливаете состояние как объект с одним свойством? Если нет, просто назначьте массив напрямую (который, похоже, является тем, что вы хотите, основываясь на вашем описании того, как вы хотите, чтобы состояние выглядело):

 const [palettes, setPalettes] = useState(seedColors);

Затем вы можете обновить массив с помощью

 setPalettes([...palettes, newPalette]);

Если вам нужен этот объект, тогда это будет:

 setPalettes({...palettes, palettes: [...palettes.palettes, newPalette]});

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

1. Большое вам спасибо, это исправлено. На самом деле я создаю «новую палитру» из другого компонента и сохраняю ее в состоянии. Последняя часть вашего ответа сработала (т.е. палитры: [… палитры. палитры, новая палитра])

Ответ №2:

Вы объявили const [palettes, setPalettes] = useState({ palettes: seedColors });
но вы пытаетесь сохранить как setPalettes({ ...palettes, palettes: newPalettes });

Я бы предложил сохранить их как на объекте:

 const [palettes, setPalettes] = useState(seedColors);
setPalettes({ ...palettes, newPalettes });`
Метки: