如何将获取数据设置为 React-Native Table

Question

由于我是 React Native 的新手，所以我不知道该怎么做。我需要做的是，将我的 API 数据设置到我的 React-Native Table 中。但我对此一无所知。

当我按下按钮时，我需要将我的数据加载到 Table。

我使用了 react-native-table-component 来创建 Scroll Table View

export default class TableView2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: [
        'ID',
        'Name',
        'User Name',
        'Gmail',
        'Phone Number',
        'WebSite',
      ],
      widthArr: [40, 60, 80, 100, 120, 140,],
    };
  }

  getData() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(responce => responce.json())
      .then(data => {
        this.setState({tableData: data...});
      });
  }

  render() {
    const state = this.state;
    const tableData = [];
    return (
      <View style={styles.container}>
        <ScrollView horizontal={true}>
          <View>
            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
              <Row
                data={state.tableHead}
                widthArr={state.widthArr}
                style={styles.header}
                textStyle={styles.text}
              />
            </Table>
            <ScrollView style={styles.dataWrapper}>
              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                {tableData.map((rowData, index) => (
                  <Row
                    key={index}
                    data={rowData}
                    widthArr={state.widthArr}
                    style={[
                      styles.row,
                      index % 2 && {backgroundColor: '#F7F6E7'},
                    ]}
                    textStyle={styles.text}
                  />
                ))}
              </Table>
            </ScrollView>
          </View>
        </ScrollView>
        <Button rounded success onPress={this.getData.bind(this)}>
          <Text>Success</Text>
        </Button>
      </View>
    );
  }
}

非常感谢..！

Answer 1

你可以试试这个：

export default class TableView2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: [
        'ID',
        'Name',
        'User Name',
        'Gmail',
        'Phone Number',
        'WebSite',
      ],
      widthArr: [40, 60, 80, 100, 120, 140,],
      tableData:[]
    };
  }

  getData() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(responce => responce.json())
      .then(data => {
        this.setState({ 
          tableData: data
        });
      });
  }

  render() {
    const state = this.state;
    const { tableData } = state;

    return (
      <View style={styles.container}>
        <ScrollView horizontal={true}>
          <View>
            <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
              <Row
                data={state.tableHead}
                widthArr={state.widthArr}
                style={styles.header}
                textStyle={styles.text}
              />
            </Table>
            <ScrollView style={styles.dataWrapper}>
              <Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
                {tableData.map((rowData, index) => (
                  <Row
                    key={index}
                    data={rowData}
                    widthArr={state.widthArr}
                    style={[
                      styles.row,
                      index % 2 && {backgroundColor: '#F7F6E7'},
                    ]}
                    textStyle={styles.text}
                  />
                ))}
              </Table>
            </ScrollView>
          </View>
        </ScrollView>
        <Button rounded success onPress={this.getData.bind(this)}>
          <Text>Success</Text>
        </Button>
      </View>
    );
  }
}

如何将获取数据设置为 React-Native Table

How To Set Fetch Data In To React-Native Table

node.js

node-modules

reactjs

react-redux

react-hooks