React Native，从异步函数更新useEffect内部状态时出现问题

Question

我正在尝试从 json API 中获取数据并将其设置为一个状态。当前使用 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( ) 函数时更新。

如果上面的代码不是最佳实践，请不要犹豫纠正我，因为我只是在学习状态。

Answer 1

setState 函数是异步的。因此 setState 之后的 console.log 将给出旧值而不是新值。

另外，你为什么不像

这样将各州分开

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

并分别设置它们，以便您的代码看起来更好。

在 updateState(jsonData) 之后你可以做

setIsloading(false);
setData(jsonData);

React Native，从异步函数更新useEffect内部状态时出现问题

React Native, problem while updating State inside useEffect from async function

async-await

reactjs

react-native

fetch-api