Question

我想对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”！

Answer 1

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

Answer 2

这是一个范围界定问题。在传递给let Promise的函数中使用GET关键字，意味着它只能在该函数内部访问。

我实际上建议将事物抽象到一个组件中，该组件将管理其自己的axios调用。像这样：

class Item {
  componentWillMount(props) {
    axios.get(Utilities.url + "Symbol/" + props.Id).then(response => {
      this.setState({
        data: {
          ...this.state.data,
          ...response.data,
      })
    });
  }

  render() {
    if (!this.state.data) {
      return null;
    }

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

function Parent(props) {
  <FlatList renderItem={ ({ item }) => <Item id={ item.id } /> } />
}

Answer 3

您在调用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>
        );
    }
}

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

更新

3 个答案: