第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

useState 對象集

useState 對象集

慕妹3242003 2021-11-25 16:28:37
我是 ReactJS 的新手并使用 Hooks。我想為對象設(shè)置狀態(tài)。這是我的代碼: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>         )}問題部分在這里:我在這里聲明對象初始狀態(tài):const [info,setInfo] = useState({    email:''})和這里:.then(data =>{        if(data!==undefined){            setInfo({...info, data})        }        console.log(info)     })它只是不工作。它不是在從未寫入中設(shè)置信息和數(shù)據(jù)。如何將接收到的數(shù)據(jù)(因為我控制臺記錄它并接收到它)分配給信息?
查看完整描述

3 回答

?
慕工程0101907

TA貢獻1887條經(jīng)驗 獲得超5個贊

setInfo 是異步的,在下一次渲染之前你不會看到更新的狀態(tài),所以當(dāng)你這樣做時:


if(data!==undefined){

  setInfo({...info, data })

}

console.log(info)

您將info 在狀態(tài)更新之前看到。


你可以使用useEffect鉤子(它告訴 React 你的組件在渲染后需要做一些事情)來查看 的新值info:


const StartPage = props => {

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

  ...

  useEffect(() => {

    console.log(info);

  }, [info]);

  ...

}

編輯


同樣正如其他人指出的那樣,您可能希望data在設(shè)置狀態(tài)時進行解構(gòu):(setInfo({...info, ...data })這完全取決于您打算如何使用它),否則狀態(tài)將如下所示:


{

  email: ...

  data: ...

}


查看完整回答
反對 回復(fù) 2021-11-25
?
長風(fēng)秋雁

TA貢獻1757條經(jīng)驗 獲得超7個贊

從api調(diào)用接收到的數(shù)據(jù)結(jié)構(gòu)是什么?你可以嘗試像這樣設(shè)置它 -

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


查看完整回答
反對 回復(fù) 2021-11-25
?
溫溫醬

TA貢獻1752條經(jīng)驗 獲得超4個贊

我不確定您所說的“不工作”是什么意思,但看起來您正在解構(gòu)信息而不是數(shù)據(jù)。我懷疑它正在設(shè)置狀態(tài),但不是您想要的方式。如果 data 是一個以 email 作為屬性的對象,你很可能也想像這樣解構(gòu)它:


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

如果你想要這樣的東西,你可以使用 useEffect 到 console.log 狀態(tài)更改:


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


const StartPage = props => {

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

  useEffect(() => {

    console.log(info)

  }, [info])


查看完整回答
反對 回復(fù) 2021-11-25
  • 3 回答
  • 0 關(guān)注
  • 227 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號