显示反应本机表组件的动态数据

Question

I have a react native app where i'm using react native table component . 我有一个本机应用程序，我正在使用react native table component 。 I have table data in my constructor which is static but I want to change table data to what i'm getting from my api. 我的构造函数中有表数据是静态的，但我想将表数据更改为我从api获取的数据。 What is the proper way to do so? 这样做的正确方法是什么？ Thanks in advance. 提前致谢。 Here's the code I have now: 这是我现在的代码：

 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> ); } }

Here in place of tableData1 I want to show the data from api which are first,second and third. 这里代替tableData1我想显示来自api的数据，分别是第一，第二和第三。

Answer 1

Assuming first second and third are the values you are fetching from api and want to display in table I would suggest rewriting the componentDidMount like this: 假设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]
    });
}

You do not need to use then if you are using async/await 如果使用async/await then无需使用

显示反应本机表组件的动态数据

问题描述

1 个解决方案

解决方案1
0 2019-05-13 16:18:24

显示反应本机表组件的动态数据

问题描述

1 个解决方案

解决方案1 0 2019-05-13 16:18:24

解决方案1
0 2019-05-13 16:18:24