第一时间状态没有改变，react答案

【问题标题】：The state does not change the first time, react第一时间状态没有改变，react
【发布时间】：2023-01-19 01:37:23
【问题描述】：

为什么当用户第一次在表单中输入数据时，'users' 仍然是一个空数组，因为它是，只有在第二次按下按钮后，数据才会写入'setUser？

import Card from "../UI/Card";
import Button from "../UI/Button";


const UserForm = (props) => {
  const [users, setUsers] = useState([]);
  const [data, setData] = useState({ username: "", age: "" });

  const submitHandler = (e) => {
    e.preventDefault();
    setUsers([...users, data]);
    console.log("2", users);
    props.getUsers(users);
  };

  return (
    <Card className={classes.container}>
      <div>Username</div>
      <input
        type="text"
        onChange={(e) => {
          setData({ ...data, username: e.target.value });
        }}
      ></input>
      <div>Age (Years)</div>
      <input
        type="number"
        onChange={(e) => setData({ ...data, age: e.target.value })}
      ></input>
      <Button onClick={submitHandler}>Add User</Button>
    </Card>
  );
};

export default UserForm;

...................................

【问题讨论】：

这回答了你的问题了吗？ The useState set method is not reflecting a change immediately

标签： reactjs

【解决方案1】：

React 状态更新需要时间。因此，您需要一个 useEffect 钩子，并将状态作为其中的参数。所以每当状态改变时，这个钩子就会触发并执行你的状态相关的功能。

useEffect(() => {
  props.getUsers(users);
}, [users]);

【讨论】：

【解决方案2】：

它正在更新但反应如何运作？

当您更新一个反应钩子的值时，如果此 value 与前一个不同，则 component 会使用钩子的新 value 进行渲染。

在你的代码中你试图：

console.log("2", users);

这是在 component 重新渲染之前，所以你得到相同的 value 但在 submitHandler 之后，组件将重新渲染

你可以更好地理解，如果你尝试从你的jsxconsole log()

return (
<Card className={classes.container}>
  {console.log('this is a new render and this is my users value :',users)}
</Card>
);

了解更多here关于 React 组件生命周期的信息

【讨论】：