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

Question

我正在尝试从 json API 获取数据并将其设置为状态。目前正在使用带有像素 4 模拟器的 Visual Studio 代码。

当我尝试在模拟器首次启动或重新加载时在 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 函数是异步的。所以console.log 紧跟在setState 之后会给出旧值而不是新值。

另外你为什么不把州分开

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

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

在updateState(jsonData)你可以这样做

setIsloading(false);
setData(jsonData);