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)

状态更新前，您会在{strong>之前看到info。

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

const StartPage = props => {
  const [user, setUser] = useState('');
  ...
  useEffect(() => {
    console.log(info);
  }, [info]);
  ...
}

编辑

正如其他人指出的那样，您可能希望在设置状态data时破坏setInfo({...info, ...data })（这完全取决于您打算如何使用它），否则状态看起来像这个：

{
  email: ...
  data: ...
}

Answer 2

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

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])

Answer 3

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

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

useState对象集

3 个答案: