Question

我有一个我正在使用react native table component的React Native应用程序。我的构造函数中有表数据，它是静态的，但我想将表数据更改为从api获取的数据。这样做的正确方法是什么？提前致谢。这是我现在拥有的代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,TouchableOpacity,AsyncStorage} from 'react-native';
import { Container,Content, Header, Title, Button, Left, Right, Body, Icon,Card,Footer, FooterTab,Badge } from 'native-base';
import { Table, Row, Rows } from 'react-native-table-component';

export default class First extends Component{
  constructor(props) {
    super(props);
    this.state = {
      first:'',
      second:'',
      third:'',
      tableHead2: ['Special'],
      tableHead3: ['Consolidation'],
      tableData1: [
        ['1ST Prize', '1000'],
        ['2ND Prize', '500'],
        ['3RD Prize', '300']
      ],
      tableData2: [
        ['53153', '1000','----','5555','51616'],
        ['31355', '500','----','5555','51616'],
        ['51456', '300','----','5555','51616']
      ],
      tableData3: [
        ['53153', '1000','----','5555','51616'],
        ['31355', '500','----','5555','51616'],
        ['51456', '300','----','5555','51616']
      ],
    }
  }

  async componentDidMount(){
   await fetch('https://myapiexample.com',{
      method : 'GET',
    })
    .then((response) => response.json())
    .then((response) => {
      const first = response.message[0][0]
      const second = response.message[0][1]
      const third = response.message[0][2]
      console.log(first,second,third)
      
  })
  }
  render() {
    const state = this.state;
    return (
      <Container style={{backgroundColor:'#f4dc41'}}>
        <Content>
          <View>
            <Card style={{backgroundColor:'#000',height:100,paddingTop:10}}>
            <View style={{flexDirection:'row',paddingHorizontal:10}}>
            <Left></Left>
            <Body><Text style={{color:'#fff'}}>Magnum</Text></Body>  
            <Right><Image source={require('../assets/logo4.jpg')}style={{width:40,height:40}}
        /></Right>
            </View>
            <View style={{paddingVertical:10,flexDirection:'row'}}>
            <Left style={{flexDirection:'row',paddingLeft:10}}><Icon name='calendar'style={{color:'#fff',fontSize:20}}/><Text style={{color:'#fff',fontSize:18,marginLeft:5}}>15/09/2019</Text></Left>
            <Body></Body>
            <Right style={{flexDirection:'row',justifyContent:'flex-end',paddingRight:10}}><Icon name='megaphone'style={{color:'#fff',fontSize:20}}/><Icon name='refresh'style={{color:'#fff',fontSize:20,marginLeft:10}}/></Right>
              
              </View>
            </Card>
            </View>
            <View style={{backgroundColor:'#fff'}}>
            <Table borderStyle={{borderWidth: 2, borderColor: '#000'}}>
          <Rows data={state.tableData1} textStyle={styles.text2}/>
        </Table>
        </View>
        </View>
        </Content>
      </Container>
    );
  }
}

这里要代替tableData1，我要显示来自api的第一，第二和第三数据。

Answer 1

假设first second和third是您从api中获取的值，并且想要显示在表中，我建议像这样重写componentDidMount：

async componentDidMount(){
    const res = await fetch('https://myapiexample.com',{  method : 'GET',});
    const data = await res.json();
    this.setState({
        first:data.message[0][0],
        second:data.message[0][1],
        third:data.message[0][2]
    });
}

如果您使用的是then，则无需使用async/await

在React Native Table组件上显示动态数据

1 个答案: