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

我想对我的get中的每个项目都发出一个renderItems()请求，因此我将其设置为：

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：每个项目未定义


我试图将renderItems转换为async函数并使用await，但又遇到另一个错误！

任何解决方案...？

更新

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


  TypeError：无法读取未定义的属性“ LVal18AFC”！

最佳答案

您在调用API时做了一个不好的做法，我的建议是，为要显示的每一行创建一个单独的组件，并在行内调用所需的API

所以根据你的代码

class Row extends Component {
    constructor() {
        super()
        this.state = {
            eachItem: null
        }
    }

    componentDidMount() {
        const { item } = this.props;
        axios.get(Utilities.url + "Symbol/" + item.Id).then(response => {
            this.setState({eachItem: response.data});
        });
    }

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

关于javascript - React Native-FlatList对renderItems中的每个项目进行获取请求，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52983901/