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

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

您可以使用 useEffect 钩子(Hook)(它告诉 React 您的组件需要在渲染后执行某些操作)来查看 info 的新值:

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

编辑

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

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