javascript - 如何在功能组件上动态获取 Axios.get 和 Render 组件的返回

Question

我有一个功能组件，我正在尝试从一个中获取数据axios.get()并根据请求的响应动态呈现一些组件。

如果我console.log的响应是Ok，但我的问题是如何使用返回axios.get()来在屏幕上创建组件。

我尝试过使用一个简单的数组并使用它可以创建组件。我想要的是在屏幕上创建组件，就像我对数组所做的那样。

在发布自己的帖子之前，我已经阅读了很多帖子。我真的很感激一些帮助或指导。

import React, { createElement, useState, useEffect } from 'react';
import { Text, StyleSheet, View, TouchableOpacity, Image } from 'react-native';
import axios from 'axios';

const HomeScreen = ({ navigation }) => {

  axios.get("http://100.103.16.113:8081/api/checklists", {
  }).then
    (function (response) {
      console.log(response.data);
    }).catch(error => {
      console.log(error);
    })
  const checklists = [{
    "id": 1,
    "checklisT_DESCRIPTION": "CHECKLIST 1"
  },
  {
    "id": 2,
    "checklisT_DESCRIPTION": "CHECKLIST 2"
  },
  {
    "id": 3,
    "checklisT_DESCRIPTION": "CHECKLIST 3"
  }
  ]
  return (
    <View >
      <Text style={styles.text}> Select an Audit</Text>

      <View style={styles.maincontainer}>
        <View style={styles.container}>

          {}
          {checklists.map(r => (

            <TouchableOpacity onPress={() => navigation.navigate('AuditS')} style={styles.button}
            >
              <Image source={require('../assets/icons8-audit-80.png')} style={styles.Image}></Image>
              <Text style={styles.ButtonText}>{r.checklisT_DESCRIPTION}</Text>

            </TouchableOpacity >
          ))}

        </View>
      </View>
      <View style={styles.bottomcontainer}>
        <TouchableOpacity onPress={() => navigation.navigate('Login')}
        >
          <Text style={styles.logout}>LOGOUT</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  text: {
    fontSize: 50,
    fontFamily: 'Comfortaa-Regular',
    alignItems: "center",
    textAlignVertical: "center",
    textAlign: "center",
    justifyContent: "center",
  },
  container: {
    marginTop: 50,
    flexDirection: "row",
    marginLeft: 50,
    width: '100%'
  },
  maincontainer: {
    flexDirection: "column",
    width: '80%',
    alignContent: "center",
    justifyContent: "center",
  },
  bottomcontainer: {
    marginTop: '70%',
    width: '100%',
    alignItems: "center",
    justifyContent: "flex-end",
    alignContent: "flex-end",
  },
  logout: {
    marginTop: 50,
    margin: 15,
    height: 60,
    width: 440,
    borderColor: '#000000',
    backgroundColor: '#000000',
    borderWidth: 2,
    borderRadius: 10,
    fontSize: 18,
    textAlign: "center",
    textAlignVertical: "center",
    color: "#FFFFFF",
    fontFamily: 'Comfortaa-Bold'
  },
  button: {
    backgroundColor: '#0f99f5',
    fontSize: 16,
    color: '#FFF',
    width: 150,
    height: 150,
    borderRadius: 10,
    textAlignVertical: "bottom",
    textAlign: "center",
    marginVertical: 20,
    marginHorizontal: 10,
    fontFamily: 'Comfortaa-Bold'
  },
  ButtonText: {
    textAlignVertical: "bottom",
    textAlign: "center",
    fontSize: 16,
    color: '#FFF',
    marginHorizontal: 10,
    fontFamily: 'Comfortaa-Bold'
  },
  Image: {
    width: "50%",
    height: "50%",
    alignContent: "center",
    alignSelf: "center",
    marginTop: 10,
    marginBottom: 10
  }
});

export default HomeScreen;

标签： javascriptreactjsreact-nativeaxios

Answer 1

您需要在组件内部使用状态。

import React, { createElement, useState, useEffect  } from 'react';


const HomeScreen = ({ navigation }) => {

  const [checkList, setCheckList] = useState([{
                "id": 1,
                "checklisT_DESCRIPTION": "CHECKLIST 1"
              },
              {
                "id": 2,
                "checklisT_DESCRIPTION": "CHECKLIST 2"
              },
              {
                "id": 3,
                "checklisT_DESCRIPTION": "CHECKLIST 3"
              }
            ]);

  useEffect(() => {
    axios.get("http://100.103.16.113:8081/api/checklists", {      
                  }).then
                   (function (response) {
                    setCheckList(response.data); // update the state
                  }).catch(error => {
                    console.log(error);                        
                  })
  }, [])

  return (