时间戳

首页 > 解决方案 > React Native - 我想在调用我的 API 之前先设置我的会话状态

reactjs - React Native - 我想在调用我的 API 之前先设置我的会话状态

问题描述

我是 React Native 的新手。如果有人可以帮助我，那就太好了。

在进行 API 调用之前，如何首先从 AsyncStorage 设置会话状态。因为这个API调用需要sessionId(UserId)所以它只能返回那些属于这个userId的数据。

我目前面临的问题是，当 API 调用它正在调用的数据时，它使用 null seesionId 而不是我从 AsyncStorage 获得的某个值，因为这两种方法（settingSession、InitList）都是异步的。

const [sessionId, setSessionId] = useState(null);

const settingSession = async () => {
  await AsyncStorage.getItem('userId').then(val => setSessionId(val));
}

 useEffect(() => {
    settingSession(); // Setting sessionId
    InitList(); // Calling API which required session value
   
}, []);

const InitList = async () => {

    var requestOptions = {
        method: 'GET',
        redirect: 'follow'
    };

    try {
        // getting sessionId null instead of value from AsyncStorage
        const response = await fetch("http://127.0.0.1:8080/skyzerguide/referenceGuideFunctions/tetra/user/" + sessionId, requestOptions)
        const status = await response.status;
        const responseJson = await response.json();
        
        if (status == 204) {
   
            throw new Error('204 - No Content');
        } else {
            setMasterDataSource(responseJson);
        }

    } catch (error) {
        console.log(error);
        return false;
    }
}

标签： reactjsasynchronoususe-effectrestasyncstorage

解决方案

我正在考虑两种可能的解决方案：

  1. 将 InitList() 分离为单独的 useEffect 调用，并将 sessionId 放入依赖数组中，这样 API 调用仅在 sessionId 实际更新时进行：
useEffect(() => {
    settingSession(); // Setting sessionId
}, []);  

 useEffect(() => {
    InitList(); // Calling API which required session value
}, [sessionId]);
  1. 在 useEffect 调用中将这两个函数包装在一个异步函数中，并使用 await 按顺序调用它们：
useEffect(() => {
    const setSessionAndInitList = async() => {
        await InitList(); // Calling API which required session value
        await settingSession(); // Setting sessionId
    }
    setSessionAndInitList()
}, []);

让我知道是否有效！

推荐阅读