javascript - 第一次按下按钮时状态不会更新，但会调用函数

Question

在第一个按钮按下 onChange 方法函数被调用，但状态没有按应有的方式更新，在按下第二个按钮时它正在更新，请参阅此

import React,{useState} from 'react';
function MainHeader(props) {
    const [FirstName, setFirstName] = useState('')
    const [User, setUser] = useState({
        FirstName: '',
        LastName: ''
    })
    const nameOnChange = (event) => {
        setFirstName(event.target.value)
        console.log(FirstName)
    }
    const addName = () => {
        setUser({
            ...User,
            FirstName: FirstName
        })
        console.log(User)
        props.addUserToFirebase(User)
    }

    return (
        <div>
            <h1>Checking</h1>
            <input type="text" onChange={(e) => nameOnChange(e)} value={FirstName}  />
            <button onClick={() => addName()}>Enter</button>
        </div>
    );
}

在 nameOnChange 上，当第一次按下某个按钮时，它是 console.log(FirstName)，然后控制台记录空状态(初始状态)，在第二个按钮上，它会更新上一个按下的按钮。我也尝试过创建类组件，但我看到了同样的问题，同样的事情发生在 addName 函数中，它在第二次单击时更新状态。查看控制台

Answer 1

我没有发现这里有问题。它按照应有的方式完美地工作。但我看到的唯一问题是你对 React 工作原理或函数式编程一般工作原理的错误理解。

函数式编程没有突变

    const nameOnChange = (event) => {
        // event => new value
        // FirstName => old value
        // they remain that way throughout this function call

        setFirstName(event.target.value)
        // even if you set the state, the values won't change
        // they will be updated only in next function call

        console.log(FirstName) // still old value
    }

对于addName()也是如此

对于每次重新渲染，React 都会调用函数 MainHeader，其值在整个调用或生命周期中不会发生变化。当值更新时，React 将使用更新后的值调用 MainHeader 。

使用组件的正确方法

可行，但不是更好的方法

const addName = () => {
  setUser({
     ...User,
     FirstName: FirstName
   })

   //
   console.log({
     ...User,
     FirstName: FirstName
   }) // new value, since User is not mutated, User will still have the old value
   props.addUserToFirebase(({
     ...User,
     FirstName: FirstName
   })
 }

更好的方法

始终使用 useEffects 来消除副作用。

// Just set the state
const addName = () => {
  setUser({
     ...User,
     FirstName: FirstName
   })
}

// handle side effects here

useEffect(() => {
    // check is needed here, since it will be
    // called on component's first mount
    if(User.FirstName !== ''){
          console.log(User)
          props.addUserToFirebase(User)
    }
}, [User])

// This will be called whenever React detects a change in `User`