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

Question

我似乎无法更新包含数组的对象。我研究过，但仍然不知道。谢谢。

状态结构：

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

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

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

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

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

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

React useState -how to set object with arrays?

setstate

reactjs

react-hooks