React useState - 如何使用数组设置对象？答案

【问题标题】：React useState -how to set object with arrays?React useState - 如何使用数组设置对象？
【发布时间】：2021-01-25 08:51:26
【问题描述】：

我似乎无法更新包含数组的对象。我研究过还是不知道。谢谢。

状态结构：

items = {
 names: [],
 cities: []
}

const [items, setItems] = useState({});

const update = (categoryName, element) => setItems(...items, [categoryName]: element)
update("names", "mike")

这只是替换数组中的元素，但不会添加到它们中

【问题讨论】：

标签： reactjs react-hooks setstate

【解决方案1】：

你会想要使用回调函数并获取最后一个状态，就像这样

const update = (categoryName, element) =>
  setItems((oldItems) => ({
    ...oldItems,
    [categoryName]: [...(oldItems[categoryName] || []), element]
  }));

完整示例

import { useEffect, useState } from "react";

export default function App() {
  const [items, setItems] = useState({ names: [] });

  const update = (categoryName, element) =>
    setItems((oldItems) => ({
      ...oldItems,
      [categoryName]: [...(oldItems[categoryName] || []), element]
    }));

  // example to call `update`
  useEffect(() => {
    update("test", "blub");
  }, []);

  return (
    <div className="App">
      {items.test?.map((item) => (
        <p>{item}</p>
      ))}
    </div>
  );
}

【讨论】：

如果我尝试这个，我得到一个错误：Uncaught TypeError: Invalid attempt to spread non-iterable instance
@juliascoding 我添加了一个完整的例子，我没有得到任何错误。您的初始状态是什么？如何调用更新？
啊，也许我应该在前面提到，但我的初始状态只是一个对象，所以它只是 {}，而不是 {names: []}。诸如名称之类的属性将被动态添加（可以是您传递给更新函数的任何字符串），确定的是这些属性值始终是一个数组。所以如果我作为 categoryName “names”传递，我总是添加到 names 数组中，如果我传递“cities”，例如 update(“cities”，“london”)，我要么创建（如果还没有 ''cities'）或添加到城市数组
@juliascoding 我更新了我的答案，如果未找到任何属性，则使用示例设置默认值