使用地图时setState在反应挂钩中不起作用

Question

我想做的是：在处理“users”数组中每个用户的数据后，我想将其添加到一个名为 newUser 的状态，然后将该新用户推送到一个名为 newUsersList 的数组。我怎样才能做到这一点？（此处的用户数组已简化）

export default function App() {
  const users = [
    {
      nom: 'name 1',
      prenom: 'last name 1',
    },
    {
      nom: 'name 2',
      prenom: 'last name 2',
    },
    {
      nom: 'name 3',
      prenom: 'last name 3',
    },
    {
      nom: 'name 4',
      prenom: 'last name 4',
    },
    {
      nom: 'name 5',
      prenom: 'last name 5',
    },
    {
      nom: 'name 6',
      prenom: 'last name 6',
    },
  ];
  const [newUser, setNewUser] = useState({});
  const [newUsersList, setNewUsersList] = useState([]);
  const handleClick = () => {
    users.map((user) => {
      setNewUser(
        {
          firstName: user.nom,
          lastName: user.prenom,
        },
        newUsersList.push(newUser),
      );
      //newUsersList.push(newUser)
    });
  };

  // useEffect(() => {
  //   newUsersList.push(...users, newUser)
  // }, [newUser])

  return (
    <div className="App">
      <button onClick={handleClick}> Add Users </button>
      {newUsersList.map((user) => {
        return <h6> user name : {user.firstName} </h6>;
      })}
    </div>
  );
}

这里的问题是 setNewUser 函数不起作用，如您所见，我尝试了 3 种解决方案：

运行 newUsersList.push(newUser) 执行setNewUser
添加 newUsersList.push(newUser) 作为 setNewUser
当 newUser 状态改变时在 useEffect 中调用 newUsersList.push(newUser)

None 这些解决方案有效。

可运行代码：https://codesandbox.io/s/vigorous-joana-82qcc?file=/src/App.js:69-1375

请注意，这是一个提取的代码，原始代码具有我正在处理的更复杂的 json 数据。我在更改 newUser 的状态时卡住了。

Answer 1

尝试将 handleClick 更改为：

const handleClick = () => {
  updatedUsers = users.map((user) => ({ firstName: user.nom, lastName: user.prenom }))
  setNewUsersList([...newUsersList,...updatedUsers]);
};

两个注意事项：首先，永远不要直接改变状态，而要始终使用它的setter。其次，您似乎根本不需要 newUser 状态

使用地图时setState在反应挂钩中不起作用

setState not working in react hooks when using map

javascript

setstate

reactjs

react-hooks

use-effect