如何从异步存储中获取项目，在键中设置值，然后使用该值向 api 发出 axios 请求以获得响应？

Question

我一直在尝试从 AsyncStorage 中检索数据，我正在成功地做这件事，之后我解决了承诺并尝试将我的 userObject 键设置为结果，设置后我想调用 axios api，但每当我这样做时，我都会收到未定义的值，因为两者都是异步请求，根本无法修复错误，我尝试了多种方法，例如，在解析 asyncstorage 时。然后进行 axios 调用，但这不起作用，我已经使用 userObject 重新渲染 useEffect，但是 api 被调用了 N 次。显然这是一个糟糕的修复，下面是我的代码

import React, {useEffect, useState} from 'react';
import {
  View,
  ScrollView,
  ActivityIndicator,
  Text,
  TouchableOpacity,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import HomeTabAssessmentCardComponent from './components/HomeTabAssessmentCardComponent';
import {API} from '../../api';
import HomeTabOverAllDevelopmentCardComponent from './components/HomeTabOverAllDevelopmentCardComponent';
import HomeTabPhysicalGrowthCardComponent from './components/HomeTabPhysicalGrowthCardComponent';
import HomeTabExpertCardComponent from './components/HomeTabExpertCardComponent';
import HomeTabPremiumCardComponent from './components/HomeTabPremiumCardComponent';
import HomeTabPrimeCardComponent from './components/HomeTabPrimeCardComponent';
import HomeTabWeekWiseImagesCardComponent from './components/HomeTabWeekWiseImagesCardComponent';

export default function HomeTabScreen(props) {
  console.log(
    ' ~ file: HomeTabScreen.js ~ line 12 ~ HomeTabScreen ~ props',
    props,
  );
  const {navigation} = props;
  const mHomeTabResponse = null;
  const [mainResponse, setMainResponse] = useState([]);
  const [mAssessmentList, setAssessmentList] = useState([]);
  const [mWeekWiseMediaList, setWeekWiseMedialist] = useState([]);
  const [title, setTitle] = useState('');
  const [text, setText] = useState('');
  const [loading, setLoading] = useState(true);
  const [userObject, setUserObject] = useState({});
  useEffect(() => {
    getData();
    getHomeTabMainAPI();
  }, [userObject]);

  const getData = () => {
    try {
      const jsonValue = AsyncStorage.getItem('user_object').then(
        (result) =>
          // console.log('result', JSON.parse(result)),
          setUserObject(JSON.parse(result)),

        // console.log('userssss', userObject),
      );
    } catch (e) {
      console.log(e);
    }
  };
  const getHomeTabMainAPI = async () => {
    try {
      const response = await API.get(
        `fist part of api?child_id=${userObject.children[0].id}last part of api`,
      );
      console.log('res', response);

      setAssessmentList(response.data.content.assessments.data);
      setWeekWiseMedialist(response.data.content.media_cards.data);
      setTitle(response.data.content.assessments.title);
      setText(response.data.content.assessments.text);

      setMainResponse(response.data.content.assessments.data);
      setLoading(false);
    } catch (e) {
      setLoading(false);
    }
  };
  const logoutHandler = () => {
    try {
      AsyncStorage.removeItem('user_object').then(navigation.navigate('login'));
    } catch (e) {
      console.log(e);
    }

    console.log('Done.');
  };
  if (loading) {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <ActivityIndicator size="large" color="#FE017E" />
      </View>
    );
  }

  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      <View style={{backgroundColor: '#fff', width: '100%', padding: 10}}>
        <TouchableOpacity
          style={{
            marginLeft: '80%',
          }}
          onPress={() => logoutHandler()}>
          <Text style={{fontSize: 15, fontWeight: 'bold', color: '#000'}}>
            Log out
          </Text>
        </TouchableOpacity>
      </View>
      <View style={{paddingBottom: 58}}>
        {/* {console.log('view mWeekWiseMediaList - ' + mWeekWiseMediaList)} */}
        {mWeekWiseMediaList !== null && mWeekWiseMediaList.length > 0 ? (
          <HomeTabWeekWiseImagesCardComponent data={mWeekWiseMediaList} />
        ) : (
          <Text></Text>
        )}
        <HomeTabOverAllDevelopmentCardComponent />
        <HomeTabPremiumCardComponent />
        {mAssessmentList &&
          mAssessmentList != '' &&
          mAssessmentList != null &&
          mAssessmentList.length > 1 &&
          userObject != null &&
          userObject != '' &&
          userObject != undefined &&
          userObject.children[0] &&
          userObject.children[0] != null &&
          userObject.children[0] != undefined &&
          userObject.children[0] != '' && (
            <HomeTabAssessmentCardComponent
              data={mAssessmentList}
              title={title}
              text={text}
              navigation={props}
              children={userObject.children[0].id}
            />
          )}

        <HomeTabPrimeCardComponent />
        <HomeTabPhysicalGrowthCardComponent />
        <HomeTabExpertCardComponent />
      </View>
    </ScrollView>
  );
}

正如您在我的端点中看到的那样 fist part of api?child_id=${userObject.children[0].id}last part of api 我需要调用 userObject.children[0].id 键并且它不应该为空。

长期以来一直坚持这个问题，任何线索都将不胜感激。如果需要更好地理解，请告诉我。

Answer 1

您的 API 调用不会等待 getData 方法完成，因为这两个方法是运行并行的。我猜测此 user_object 在此屏幕上永远不会为空或未定义（希望您已经在更高级别检查此值，也许在您的路由器定义中）。如果是这样，您最初可以将 userObject 设置为 null

const [userObject, setUserObject] = useState(null);

在您的 userObject 副作用中，添加以下检查，

useEffect(() => {
  if(userObject)
    getHomeTabMainAPI(); 
  else
    getData();
}, [userObject]);

这样，最初将调用 getData() 方法，该方法将从 AsyncStorage 获取数据并设置 userObject。 userObject 中的更改会触发副作用，这次会运行 getHomeTabMainAPI()。

如何从异步存储中获取项目，在键中设置值，然后使用该值向 api 发出 axios 请求以获得响应？

how to get item from async storage, set the value in a key and then with that value make an axios request to api for response?

reactjs

react-native

async-await

react-native-android

react-native-ios