在 react native table 组件中显示从 API 获取的数据。

Question

由于我是新手，不知道如何操作，想把从API获取的数据显示在react native表中，比如如果有10个用户，那么应该以表格的形式显示10个用户的数据。

export default class LeaveApprove extends Component {
  constructor(props) {
    super(props);
    this.state = {
     data:[]
      tableHead: ['S.No', 'NAme', 'Title'],
      tableData: [
        ['1', 'RAm', 'Manager',],
        ['2', 'Rahul', 'Admin',],
        ['3', 'Rohit', 'Accounts'],
  ],


    }
  }
   componentDidMount(){
        const url = "https://jsonplaceholder.typicode.com/users";
        fetch(url,{
          method:'GET'
        })
        .then(response =>response.json())
        .then(data =>{
        this.setState({data:data})
        })
      }

  render() {
    const state = this.state;
    return (
      <Container>
   <ScrollView horizontal={true} vertical={true}>

              <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}} style={{height:'100%'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text} widthArr={[46,50,65,65,40,80,150]}/>
          <Rows data={state.tableData} style={styles.row}  textStyle={styles.text} widthArr={[46,50,65,65,40,80,150]} />
        </Table>

          </ScrollView>


    </Container>

    )
  }
}

Answer 1

在render()中，首先要对数据进行反结构，比如：const {data} = this.com。

const {data} = this.state;

然后在表里面

<Rows data={data.tableData} style={styles.row}  textStyle={styles.text} widthArr={[46,50,65,65,40,80,150]} />