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){&nbsp; setInfo({...info, data })}console.log(info)您将info 在状态更新之前看到。你可以使用useEffect钩子（它告诉 React 你的组件在渲染后需要做一些事情）来查看 的新值info：const StartPage = props => {&nbsp; const [user, setUser] = useState('');&nbsp; ...&nbsp; useEffect(() => {&nbsp; &nbsp; console.log(info);&nbsp; }, [info]);&nbsp; ...}编辑同样正如其他人指出的那样，您可能希望data在设置状态时进行解构：（setInfo({...info, ...data })这完全取决于您打算如何使用它），否则状态将如下所示：{&nbsp; email: ...&nbsp; data: ...}

Answer 2

从api调用接收到的数据结构是什么？你可以尝试像这样设置它 -setInfo({&nbsp;...info,&nbsp;email:&nbsp;data.email&nbsp;})

Answer 3

我不确定您所说的“不工作”是什么意思，但看起来您正在解构信息而不是数据。我怀疑它正在设置状态，但不是您想要的方式。如果 data 是一个以 email 作为属性的对象，你很可能也想像这样解构它：setInfo({...info, ...data})如果你想要这样的东西，你可以使用 useEffect 到 console.log 状态更改：import React, { useState, useEffect } from 'react'const StartPage = props => {&nbsp; const [info,setInfo] = useState({ email:'' })&nbsp; useEffect(() => {&nbsp; &nbsp; console.log(info)&nbsp; }, [info])