React Native, проблема при обновлении State внутри useEffect из функции asyn c - PullRequest
Новая
       15

React Native, проблема при обновлении State внутри useEffect из функции asyn c

0 голосов
/ 25 марта 2020

Я пытаюсь получить данные из API json и установить их в состояние. В настоящее время используется код Visual Studio с эмулятором пикселя 4.

Когда я пытаюсь обновить свое состояние внутри метода useEffect при первом запуске или перезагрузке эмулятора, оно не меняется. Если я сохраняю в коде vs, данные в состоянии обновляются, как и предполагалось. 

...
import React, {useState, useEffect} from 'react';
import {getJsonData} from './getJsonData';

const myApp = () => {
    const [state, setState] = useState({
      isLoading: true,
      data: null,
    });

    const updateState = data => {
      console.log(data); //Logs the correct Json data everytime
      setState(state => ({...state, isLoading: false, data: data}));
      console.log(state.isLoading); //Doesn't update on reload (updates only on save)
      console.log(state.data); //Same as above
    };

    useEffect(() => {
      getJsonData().then(data => updateState(data));
    }, []);

    return (
      <View>
        <Text>{state.data.title}</Text>
        <Text>{data.data.completed}</Text>
      </View>
    );
}

И это функция getJsonData (): 

export async function getJsonData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    let responseJson = await response.json();
    return responseJson;
  } catch (error) {
    console.error(error);
  }
}

В конечном итоге я хочу, чтобы состояние обновлялось первый запуск приложения, при перезагрузке, а также каждый раз, когда я вызываю определенную функцию reloadApp ().

Если приведенный выше код не является наилучшей практикой, не откладывайте, чтобы исправить меня, пока я я только узнаю о состоянии.

1 Ответ

1 голос
/ 25 марта 2020

setState функция асинхронная. Таким образом, console.log сразу после setState даст старое значение, но не новое значение.

Кроме того, почему бы вам не разделить состояния, такие как 

const [isLoading,setIsLoading]=useState(true);
const [data,setData] = useState(null);

, и установить их отдельно, чтобы ваш код выглядел лучше.

в updateState(jsonData) вы можете сделать тогда 

setIsloading(false);
setData(jsonData);
...