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

Question

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

如何在 AsyncStorage 进行 API 调用之前先从 AsyncStorage 设置我的会话状态。因为这个 API 调用需要 sessionId (UserId) 所以它可以 return 只有那些属于这个 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;
    }
}

Answer 1

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

将 InitList() 分离到一个单独的 useEffect 调用中，并将 sessionId 放在依赖数组中，以便仅在 sessionId 实际更新时才进行 API 调用：

useEffect(() => {
    settingSession(); // Setting sessionId
}, []);  

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

将两个函数包装在 useEffect 调用中的异步函数中，并使用 await:

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

让我知道是否有效！

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

React Native - I want to set my session state first before I call my API

rest

asynchronous

reactjs

asyncstorage

use-effect