useState 的 set 方法未能改变值 - React

Question

我希望在handleJoin()函数中将用户发送到后端。在调用setUser之后，初始数据没有改变。

如何在不使用class的情况下解决这个问题。

App.js

import React, { useState } from "react";
import Join from "./components/Join";

const App = () => {
  const [user, setUser] = useState({ });

  // Send user data to backend
  const handleJoin = (input) => {     
    console.log(input);               // >   {name: "myname"}

    setUser(input);                   //     Not working!

    console.log(user);                // >   { }

    // I want to connect backend here
    // But the user objet is empty
  };

  return <Join onJoin={handleJoin} />;
};

export default App;

- Doby

---

我们怎么能在不看Join组件的代码，特别是它的onJoin属性如何使用的情况下回答这个问题呢？ - Robin Zigmond

Answer 1

setUser 被调用后，user 将在下一次渲染时更新。

import React, { useState, useEffect } from "react";
import Join from "./components/Join";

const App = () => {
  const [user, setUser] = useState(null);

  // This is a side effect that will occur when `user`
  // changes (and on initial render). The effect depends
  // `user` and will run every time `user` changes.
  useEffect(() => {
    if (user) {
      // Connect to backend here
    }
  }, [user])

  // Send user data to backend
  const handleJoin = (input) => {     
    console.log(input);
    setUser(input);
  };

  return <Join onJoin={handleJoin} />;
};

export default App;

- twharmon

Answer 2

状态更新不是同步的，因此它不会立即更新用户对象，但它将被异步更新。因此，您可以使用 input，它将是要发送到后端的用户值，或者您可以使用 useEffect() 钩子，它将在 user 值更新时触发。

useEffect(() => {
  // this will be triggered whenever user will be updated
  console.log('updated user', user);
  if (user) {
    // connect to backend now
  }
}, [user]);

- Zohaib Ijaz

---

user 最初是真值，因为它的初始值为 {}。 - twharmon

it conveys the idea - Zohaib Ijaz

当我尝试这样做时，useEffect内部的代码会无限运行。 - Asma Rahim Ali Jafri

在 useEffect 中必须更新/设置用户值，这会导致循环重新渲染，因为 useEffect 具有 user 依赖项，每当用户更改时它都会运行。 - Zohaib Ijaz