react-native - 使用 Axios 显示数据（React Native）

Question

我正在尝试显示使用 Axios 获取的数据。他们以阵列的形式出现。正因为如此，我无法向他们展示。我应该怎么办？

这是我的获取代码

componentDidMount() {
    axios.post('http://192.168.1.106:80/partner_project_backend/project_list.php')
    .then((response) => {
      console.log(response.data)
    })
    .catch((error) => {
      console.error(error);
    });
  }

这是我的 console.log

标签： react-nativeaxios

Answer 1

我猜你正在正确地获得 API 响应，你唯一的目的是在你的应用程序中显示数据。如果是这样，您可以使用FlatList来自的组件React Native

import React from 'react';
import { FlatList, Text } from 'react-native';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    axios.get('http://192.168.1.106:80/partner_project_backend/project_list.php')
      .then((response) => {
        this.setState({ data: response.data });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return (
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <Text>{item.name}</Text> // render your view here
        )}
        keyExtractor={item => item.id}
      />
    );
  }
}

在https://reactnative.dev/docs/flatlist上反应更多关于 FlatList