javascript - React Native - FlatList 对 renderItems 中的每个项目进行获取请求

Question

我想为我的 renderItems() 中的每个项目发出一个 get 请求，所以我是这样的:

renderItems({ item }) {
  axios.get(Utilities.url + "Symbol/" + item.Id).then(response => {
    let eachItem = response.data;
  });

  console.log(eachItem);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "flex-end",
        alignSelf: "stretch",
        marginRight: 2
      }}
    >
      <Text
        style={{
          color: Colors.WHITE,
          fontSize: 16
        }}
      >
        {eachItem.LVal18AFC}
      </Text>
    </View>
  );
}

但我得到以下错误:

ReferenceError: eachItem is not defined

我尝试将 renderItems 转换为 async 函数并使用 await 但我遇到了另一个错误!

任何解决方案...？

更新

我在 axios 的 then 函数之外使用了 var eachItem = [] 但现在我得到了:

TypeError: Cannot read property 'LVal18AFC' of undefined!

Answer 1

@Jigar 是正确的。为什么它不起作用:当您调用 renderItems 函数时，js 会查看异步调用并将其放入事件循环中以供稍后执行。然后它继续并记录到您的控制台 eachItem ，它现在是未定义的。然后呈现您的 JSX，然后在请求返回数据时执行异步调用(即 axios 请求)，它只是存储在 axios 函数范围内的 eachItem 中。