我是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) })
它只是不工作。它不会设置信息和数据永不写入。如何将接收到的数据分配给该信息(因为控制台已记录并接收到该数据)?
setInfo 是异步的,在下一次渲染之前您不会看到更新后的状态,因此在执行此操作时:
setInfo
if(data!==undefined){ setInfo({...info, data }) } console.log(info)
您会info 在 状态更新 之前 看到。
info
您可以使用useEffect钩子(它告诉React您的组件在渲染后需要做一些事情)来查看的新值info:
useEffect
const StartPage = props => { const [user, setUser] = useState(''); ... useEffect(() => { console.log(info); }, [info]); ... }
编辑
也正如其他人指出的那样,您可能希望data在设置状态时进行破坏:(setInfo({...info, ...data })这完全取决于您打算如何使用它),否则状态将如下所示:
data
setInfo({...info, ...data })
{ email: ... data: ... }