Question

const [users, setUsers] = useState([]);

setUsers([...users, { name: 'Alexandre'} ]);

console.log(users);

这是我唯一想做的事情。请帮帮我

Answer 1

您需要在 setUsers 中传递一个函数。
该函数将为您提供您尝试更新的变量的 previous state。
使用 previous state 创建一个新状态（数组）并从函数中返回它。
返回的值将在状态中更新。

const [users, setUsers] = useState([]);

setUsers((prevStateOfUsers) => {

 const newStateOfUsers = [...prevStateOfUsers, { name: 'Alexandre'} ];

 return newStateOfUsers; 

});

console.log(users);

Link to official react js docs

oneliner 爱好者的一个班轮解决方案

setUsers((prevStateOfUsers) => [...prevStateOfUsers, { name: 'Alexandre'} ]);

Answer 2

请试试这个：

import React, { useState, useEffect } from 'react';

function Example() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    setUsers([...users, { name: 'Alexandre'} ]);
    console.log(users);
  }, []);

  return (
    <div>
      something...
    </div>
  );
}

关键字是 useEffect。

Answer 3

你能把页面的代码放上来吗？或者您可以编写此代码：

在函数中

import React, { useState } from 'react'; 

const Component = ({ setUsers }) => {

  const [users, setUsers] = useState([]);

  const addMember = (value) => {
    setUsers([...users, {      
      name: value,
    }]);
  };

  return (
    your code...
  );
};

或者按照Artem Medianyk在useEffect中的说明

import React, { useState, useEffect } from 'react';

 const Component = () => {

  const [users, setUsers] = useState([]);

  useEffect(() => {
    setUsers([...users, {
       name: 'Alexandre',
    }]);
  }, []);

  return (
   your code...
  );
};

我正在尝试更新用 useState 声明的数组，但收到错误“重新渲染太多”

3 个答案: