useState 对象集

Question

我是 ReactJS 的新手并使用 Hooks。我想为对象设置状态。这是我的代码：const StartPage = (props)=> {    const [user,setUser] = useState('')    const [password,setPassword] = useState('')    const [info,setInfo] = useState({           email:''        ]})    const onUserChange=(e)=>{        const user = e.target.value        setUser(user)    }    const onPasswordChange=(e)=>{        const password = e.target.value        setPassword(password)    }    const onSubmit=(e)=>{        e.preventDefault()        const myHeader = new Headers ({            'APIKey':'*****',            "Content-Type": "application/json",            'Access-Control-Allow-Origin': '*',            'Access-Control-Expose-Headers':'headers'        })        fetch(`[my_link_to_api]?username=${user}&password=${password}`,{            method:'GET',            credentials: 'omit',            headers:myHeader,        })        .then(response =>response.json())        .then(data =>{            if(data!==undefined){                setInfo({...info, data})            }            console.log(info)         })        .then(()=>{            console.log(info)            history.push({                pathname:'/dashboard',                state:info            })        })        .catch((e)=>{            console.log(e)        })    }    return (        <div>          <form onSubmit={onSubmit}>                <input type="text" placeholder="username" onChange={onUserChange}></input>                <input type="password" placeholder="password" onChange={onPasswordChange}></input>                <button>Login</button>            </form>        </div>         )}问题部分在这里：我在这里声明对象初始状态：const [info,setInfo] = useState({    email:''})和这里：.then(data =>{        if(data!==undefined){            setInfo({...info, data})        }        console.log(info)     })它只是不工作。它不是在从未写入中设置信息和数据。如何将接收到的数据（因为我控制台记录它并接收到它）分配给信息？

Answer 1

setInfo 是异步的，在下一次渲染之前你不会看到更新的状态，所以当你这样做时：

if(data!==undefined){

  setInfo({...info, data })

}

console.log(info)

您将info 在状态更新之前看到。

你可以使用useEffect钩子（它告诉 React 你的组件在渲染后需要做一些事情）来查看 的新值info：

const StartPage = props => {

  const [user, setUser] = useState('');

  ...

  useEffect(() => {

    console.log(info);

  }, [info]);

  ...

}

编辑

同样正如其他人指出的那样，您可能希望data在设置状态时进行解构：（setInfo({...info, ...data })这完全取决于您打算如何使用它），否则状态将如下所示：

{

  email: ...

  data: ...

}

Answer 2

从api调用接收到的数据结构是什么？你可以尝试像这样设置它 -

setInfo({ ...info, email: data.email })

Answer 3

我不确定您所说的“不工作”是什么意思，但看起来您正在解构信息而不是数据。我怀疑它正在设置状态，但不是您想要的方式。如果 data 是一个以 email 作为属性的对象，你很可能也想像这样解构它：

setInfo({...info, ...data})

如果你想要这样的东西，你可以使用 useEffect 到 console.log 状态更改：

import React, { useState, useEffect } from 'react'

const StartPage = props => {

  const [info,setInfo] = useState({ email:'' })

  useEffect(() => {

    console.log(info)

  }, [info])