在反应原生表组件中显示从 API 获取的数据答案

【问题标题】：Display Fetched Data from API in react native table component在反应原生表组件中显示从 API 获取的数据
【发布时间】：2020-05-21 18:41:54
【问题描述】：

由于我是 react native 的新手，我不知道该怎么做。想在 react native 表中显示从 API 获取的数据，例如如果有 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>

    )
  }
}

【问题讨论】：

你已经在数据变量中声明了你获取的 inf，但你没有在组件的任何地方使用它
我需要知道的我想显示从 API 获取的数据并连续显示（state.tableData）。例如，如果我的 API 包含 id、name、title 等 10用户我如何在行数据中显示它。我获取数据并存储在状态不知道之后的步骤中
所以对于这种情况，我必须将我的 tabledata 状态保持为一个空数组...如何显示特定值，如 Sno--包含 id，名称列包含用户名等

标签： reactjs react-native react-table

【解决方案1】：

在render()里面首先解构数据，比如：

const {data} = this.state;

然后在桌子里面

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

【讨论】：

我试过了，但它会变成空白的白屏，没有别的 tableData: [This section data need to get from API as u can see the url contain 10 users data with id and titlesetc.. ['1', 'Ram', 'ADmin'], ['2', 'Rahul', 'Manager ',], ['3', 'Rohit', '账户',], ],