在本机 table 组件中显示从 API 获取的数据

Question

因为我是 React Native 的新手，所以我不知道如何 this.want 在 React Native table 中显示从 API 获取的数据，就像有 10 个用户那样它应该以 table 格式显示 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 {数据} = this.state;

然后在table

里面

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

在本机 table 组件中显示从 API 获取的数据

Display Fetched Data from API in react native table component

reactjs

react-native

react-table