数组未在useState挂钩中更新？

Question

我有一个这样的对象数组

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

我想使用此数组创建图表，因此需要从names和ages创建两个数组。然后我想将它作为道具传递给另一个组件

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

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

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

这里的问题是正在创建newNames，但是当我用钩子setNames设置它时，names并未更新，它仍然是空的。我不确定我在做什么错。
所有帮助将不胜感激。

Answer 1

您应该让useEffect()订阅contentLoading和array这两个道具，因此只要其中一个发生更改，它就可以运行，而不是在第一个道具之后运行一次安装。

工作代码和沙箱：https://codesandbox.io/s/mutable-mountain-wgjyv

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

const App = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setLoading(true);
    }, 2000);
  }, []);

  return <Child array={array} contentLoading={loading} />;
};

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

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

  return (
    <div>
      {names.map(name => (
        <div>{name}</div>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

使用挂钩更新状态时，最好使用回调。

尝试更新您的代码：

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);
}, []);

Answer 3

您应该写setNames([...names, ...newNames]);

在age: 23

之后，您错过了const数组中的逗号

Answer 4

尝试一下：

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