使用React Native AsyncStorage传递动态URL时,无法首次提取数据

xeufq47z  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(113)

我尝试通过类似http://localhost/api/offer/get-offerlist?id=${userId}的方式获取数据,userId从react原生AsyncStorage获取。
问题是我无法在渲染屏幕前从第一次获取数据。在第二次刷新屏幕后,数据成功获取。

代码:

const [userId, setUserID] = useState("");
  const [list, setList] = useState("");
  const [loading, setLoading] = useState(false);
  const [getStationsId, setGetStationsId] = useState("");

  const [filterRecord, setFilterRecord] = useState("");

  const getOfferList = async () => {
    try {
      setLoading(true);
      const userId = await AsyncStorage.getItem('userId');
      const response = await fetch(
        `http://localhost/api/offer/get-offerlist?id=${userId}`,
        {
          headers: {
            accept: 'application/json',
            'Content-Type': 'application/json'    
          },
        },
      );
      const data = await response.json();

        //StationID from result Object
      const extractedStationId = data.map((item) => item.result);
      setGetStationsId(extractedStationId);

      const myArrayFiltered = data.filter((el,index) => {
      return getStationsId[index].some(f => {
        return f.offerUserId === el.userId;
      });
    });
      setLoading(false);
      setList(data);
      setFilterRecord(myArrayFiltered);
    } catch (e) {
      console.log(e);
      setLoading(false);
    }
  };

 useEffect(() => {  
    getOfferList();
  }, []);

我希望我能够第一次使用从移动的本地存储获得的用户ID获取数据。

l7wslrjt

l7wslrjt1#

使用UseLayoutEffect而不是useEffect,然后添加if loading = true以返回正在加载的文本,如果没有加载,则返回主要内容。

相关问题