react-native - 如何使用 Axios React Native 在 FlatList 中渲染 Resonse？

Question

我使用 Axios 来获取这个 API，我遇到了一个问题，如何在 Flatlist 中呈现响应？

import Axios from "axios";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { FlatList } from "react-native-gesture-handler";

export default function App() {
  Axios({
    method: "GET",
    baseURL:
      "https://bitbucket.org/!api/2.0/snippets/kamalo11/9nab7z/2ab26f49667b945a4e78679492fc7950bc1df3be/files/ecommerce.json",
  })
    .then((res) => console.log(res))
    .catch((err) => console.error(err));
    
  const res = res;

  return (
    <FlatList
      data={res}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <Text>{item.price}</Text>}
    />
  );
}

什么是灵魂出窍？

标签： react-nativeaxios

Answer 1

首先将 res 设置为 state

this.setState({res: res});

然后在 FlatList 中调用 state

 <FlatList
      data={this.state.res}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <Text>{item.price}</Text>}
    />