набор объектов useState - PullRequest
Новая
       11

набор объектов useState

0 голосов
/ 18 октября 2019

Я новичок в 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) 
    })

это просто не работает. Это не установка информации и данных никогда не пишется. Как я могу присвоить полученные данные (потому что я их записал в консоль и они получили) информации?

Ответы [ 3 ]

2 голосов
/ 18 октября 2019

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: ...
}
1 голос
/ 18 октября 2019

Я не совсем уверен, что вы подразумеваете под "не работает", но похоже, что вы разбираете информацию, а не данные. Я подозреваю, что это устанавливает состояние, но не так, как вы хотите. Если данные являются объектом с электронной почтой как свойством, вы, скорее всего, захотите деконструировать это тоже так: 

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])
0 голосов
/ 18 октября 2019

Какова структура данных, полученных от вызова API? Вы можете попробовать установить его так - 

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