子组件在第二次尝试中发送正确的数据

Question

我正在尝试将一个对象从我的子组件发送到它的父组件。我通过 fetch 获取数据，使用 state 更新 JSON 对象中的响应并通过 props 发送它。但是，我第一次发送它时，它会发送 'abc' 或我最初分配给对象的任何值，然后第二次发送响应。

function Login(props) {

  const loginAttempt = (email, password) => {
    fetch('http://localhost:5000/user/login', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email: email,
        password: password
      })
    })
      .then(res => res.json())
      .then(data => {
        setUserData({
          status: data.status,
          name: data.name,
          token: data.token
        })
        props.handleUserData(userData)
      })
      .catch(err => console.log(err))
  }

  const classes = useStyles()

  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [userData, setUserData] = React.useState('abc')

  const handleEmail = (event) => {
    setEmail(event.target.value)
  }
  const handlePassword = (event) => {
    setPassword(event.target.value)
  }

  return (
    <div className="login-container">
      <Grid container spacing={2} direction="column" alignItems="center">
        <Grid item>
          <TextField className={classes.fieldStyle} variant="outlined" label="Email Address" onChange={handleEmail} />
        </Grid>
        <Grid item>
          <TextField className={classes.fieldStyle} variant="outlined" label="Password" type="password" onChange={handlePassword} />
        </Grid>
        <Grid item>
          <Button className={classes.buttonStyle} variant="outlined"
            onClick={() => loginAttempt(email, password)}
          >
            Login
          </Button>
        </Grid>
        <Grid item>
          <Button className={classes.buttonStyle} variant="outlined">Forgot Password</Button>
        </Grid>
      </Grid>
    </div>
  );
}

Answer 1

钩子中的setter不是同步的，所以如果你这样做

setUserData({
  status: data.status,
  name: data.name,
  token: data.token
})

您不能立即访问 useData，因为它可能不会更新。

我建议您使用 useEffect，当 userData 更新时触发，并从那里更新父状态。

喜欢

useEffect(()=>{
    if(userData){
        props.handleUserData(userData)
    }
},[userData])

子组件在第二次尝试中发送正确的数据

Child Component Sends Correct Data In Second Attempt

fetch

reactjs

react-state

use-state