如何在React nataive中将数据json显示到表中

时间:2019-09-23 15:28:20

标签: react-native

当我将数据json显示到表中时,我遇到问题react native,对我有什么解决方案吗?我已经尝试过桌头,桌。但是当我调用子元素并将其放入行数据中时。我收到错误数据不起作用,如果您混淆了,让我将显示我的代码

DetailComponent.js

class DetailComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tableHead: ['Nama Buku', 'User', 'Email', 'Tgl Pinjam', 'Durasi', 'Denda'],
            tableData: [
                ['1', '2', '3', '4', '5', '6']
            ]
        }
    }



    render() {
        const state = this.state
        return (
                <View style={styles.container}>
                 <View style={styles.parentViewStyle}>
                 <Text style={styles.textHeaderStyle}> Detail Transaksi </Text>
                    <Table >
                        <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
                    { this.props.post.map ((h,i) => {

                        return (
                            <Rows key= {i} data= {h} style={styles.row} textStyle={styles.text}/>)
                    })}


                    </Table>

                 </View>
                </View>



        )
    }
}

DetailContainer.js

lass DetailContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            post : [],
            formData : {
                id : '',
                namaBuku : '',
                first_name : '',
                email : '',
                tanggal : '',
                durasi : '',
                denda : '',
            }
        }
    }

    getPostAPI = () => {
        axios.get('http://192.168.43.231:8001/datatransaksi')
        .then((res) => {
            this.setState ({
                post : res.data
            })
        })
    }
render() {
        return (
            <DetailComponent
                onValueChange = {this.onValueChange}
                onBackPress={this.onBackPress}
                handleSubmit={this.handleSubmit} 
                formState={this.state.formData}
                post = {this.state.post}
                />
        );
    }
}

export default DetailContainer;

i expect the data appear into table like td th tr in react js. so many thanks if you help me to solve this problem

1 个答案:

答案 0 :(得分:0)

似乎Rows组件中的data属性需要一个数组数组。

尝试<Rows data={this.props.post} ...... />