useState对象集

小编典典

useState对象集

reactjs

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

它只是不工作。它不会设置信息和数据永不写入。如何将接收到的数据分配给该信息（因为控制台已记录并接收到该数据）？

阅读 448

2020-07-22

共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: ...
}

2020-07-22