Метод setState, не изменяющий значение - React

Question

Я хочу отправить пользователя бэкенду в функции handleJoin(). После вызова setUser исходные данные не изменились.

Как исправить это без использования class

Приложение. 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]);