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：每個項目未定義

我試圖將renderItems轉換為async函數並使用await但出現另一個錯誤！

任何解決方案...？

更新

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

TypeError：無法讀取未定義的屬性“ LVal18AFC”！

Answer 1

@Jigar是正確的。 為何不起作用：當您調用renderItems函數時，js會查看asyn調用，並將其放入其事件循環中，以便以后執行。 然后，它繼續運行並將當前未定義的eachItem記錄到控制台。 然后呈現您的JSX，然后在要求供應將數據備份的目的只是為了存儲執行異步調用（即Axios公司要求） eachItem這是在愛可信功能的范圍。

Answer 2

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

Answer 3

這是一個范圍界定問題。 在傳遞給GET promise的函數中使用let關鍵字，意味着只能在該函數內部訪問它。

我實際上建議將事物抽象到一個組件中，該組件將管理其自己的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 } /> } />
}