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;

Answer 1

user将在调用setUser后在下一个渲染器上更新。

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;

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]);

useState设置方法不更改值-React

2 个答案: