在第一个按钮上按下状态未更新，但调用了功能

debugcn 发表于 Dev

萨米尔·阿里

在第一个按钮上按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函数中发生了同样的事情，它在第二次单击时会更新状态。查看控制台

普希金

我在这里没有问题。它可以正常运行。但是我看到的唯一问题是您对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`

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。