如何使用 useState 挂钩更新对象的状态以保持现有元素？

Question

我有一个对象数组：

// 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 挂钩将新对象附加到现有对象？

// 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" },
    ] 
  },
]

Answer 1

您的应用程序可能会“崩溃”，因为您输入错误：

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

您没有名称为 newPalettes 的变量。但即使你修复了它，它也不会产生你想要的结果。

是否有理由将状态设置为具有单个属性的对象？如果没有，直接给数组赋值即可（根据你对状态的描述，这似乎是你想要的）：

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

然后你可以用

更新数组

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

如果您需要那个对象，那么它将是：

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

Answer 2

您声明了const [palettes, setPalettes] = useState({ palettes: seedColors });
但您尝试另存为 setPalettes({ ...palettes, palettes: newPalettes });

我建议将它们保存为对象：

const [palettes, setPalettes] = useState(seedColors);
setPalettes({ ...palettes, newPalettes });`

如何使用 useState 挂钩更新对象的状态以保持现有元素？

How do I update an object's state keeping the existing elements using useState hook?

javascript

reactjs

react-hooks

use-state