useState 对象集答案

【问题标题】：useState object setuseState 对象集
【发布时间】：2020-02-15 11:04:16
【问题描述】：

我是 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) 
    })

它只是不工作。它没有设置从未写入的信息和数据。如何将接收到的数据（因为我在控制台记录并接收到）分配给信息？

【问题讨论】：

不工作是什么意思？不是重新渲染吗？或 info 对象未正确更新，因为我可以看到它应该是 setInfo({...info, ...data}) inseated of setInfo({...info, data})

标签： javascript reactjs react-redux react-hooks

【解决方案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: ...
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

如果需要，可以使用 useEffect 来控制台记录状态更改：

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

const StartPage = props => {
  const [info,setInfo] = useState({ email:'' })
  useEffect(() => {
    console.log(info)
  }, [info])

【讨论】：