reactjs - 数组没有在 useState Hook 中更新？

Question

我有一个这样的对象数组

const array = [
 {
  age: 13,
  name: "Housing"
  },
  {
  age: 23
  name: "Housing"
  }
]

我想使用这个数组来创建图表，所以我需要从 names 创建两个数组和 ages .然后我想把它作为 Prop 传递给另一个组件

到目前为止，我在我的父组件中提出了这个

const [names, setNames] = useState([]);
  useEffect(() => {
    createArray();
  }, []);

const createArray = () => {
    if (contentLoading) {
      const newNames= array.map((item) => item.name);
      setNames([...names, newNames]);
    }
  };

这里的问题是 newNames正在创建，但是当我用钩子(Hook) setNames 设置它时, names没有更新，还是空的。我不确定我做错了什么。
所有的帮助将不胜感激。

Answer 1

使用钩子(Hook)更新状态时，最好使用回调。

尝试更新您的代码:

setNames(prevNames => [...prevNames, ...newNames])

这与 prevState 的工作方式相同。与 setSate() 合作过.

对于您的解决方案，您可以在 useState() 中设置初始状态:

const array = [
  {
    age: 13,
    name: "Housing"
  },
  {
    age: 23,
    name: "Housing"
  }
];

const [names, setNames] = useState(() => array.map(item => item.name));

useEffect(() => {
  console.log(names);
}, []);