Реакция: состояние содержит пустой объект после setState на объекте со значениями - PullRequest
Новая
       110

Реакция: состояние содержит пустой объект после setState на объекте со значениями

0 голосов
/ 05 августа 2020

Конечно, есть лот из вопросов и ответов о setState, и я пробовал их посмотреть, но не нашел проблема (или решение), которая достаточно похожа на мою, чтобы быть полезной. По-прежнему очень возможно, что есть один, который занимается этим, и если да, укажите на него и извинитесь за дубликат.

Вот соответствующий код из функционального компонента React: 

const [ state, setState ] = useState({})

useEffect(data => {
     const getFromServer = axios.get('http://localhost:3030/poolInfo')
        .then(res => {
            console.log("RES.DATA LOOKS LIKE THIS:, ", res.data);
            setState(res.data);  // I also tried setState({...res.data})
            console.log("IN AXIOS, STATE IS NOW: ", state);
        })
        .catch (err => console.error("YO YOU GOT AN ERROR IN AXIOS ", err))

},[])

Вот результаты двух console.log s выше:

RES.DATA LOOKS LIKE THIS:, Object { balance: 1000000000000000000, feeAndSplit: Array [500, 20] }

IN AXIOS, STATE IS NOW: Object { }

Первый console.log показывает данные именно так, как я ожидал. (Нажатие того же API с помощью Postman также возвращает те же данные.) Я вызываю setState буквально для той же переменной, которая только что имела данные второй go в журналах, и пуф! Теперь это пустой объект.

Я подумал, что, возможно, сам console.log делал что-то странное с res.data, поэтому я также попытался закомментировать первый console.log, но все равно получил те же результаты.

Я подумал, может быть, это как-то связано с настройкой состояния внутри useEffect, но если это так, я в растерянности. (Например, этот ответ, кажется, указывает на то, что до тех пор, пока пустой массив передается в конце useEffect, все должно быть хорошо и красиво.)

Что случилось с res.data, и / или как мне установить для него состояние?

Спасибо!

1 Ответ

1 голос
/ 05 августа 2020

Все работает, за исключением того, что вы поместили оператор журнала в место, где он бесполезен.

state - это локальная константа. Это никогда не изменится, и это не то, что пытается сделать setState. Цель вызова setState - сообщить, что нужно выполнить повторную визуализацию компонента. Когда компонент выполняет повторную визуализацию, будет создана новая локальная константа, которая будет иметь это новое значение. Код в новом рендере может получить доступ к этому новому значению, но код в старом рендеринге по-прежнему ссылается на предыдущее значение. в теле компонента, чтобы он мог регистрироваться при рендеринге: 

const [ state, setState ] = useState({})
console.log("Rendering with: ", state);

useEffect(data => {
     const getFromServer = axios.get('http://localhost:3030/poolInfo')
        .then(res => {
            console.log("RES.DATA LOOKS LIKE THIS:, ", res.data);
            setState(res.data);
        })
        .catch (err => console.error("YO YOU GOT AN ERROR IN AXIOS ", err))

},[])
...