如何将Fetch Data设置为React Native表

Question

由于我刚开始使用原生react，我不知道如何做到这一点。我需要做的是，将我的API数据设置到我的反应表中。但我对此一无所知。

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

我使用react原生表组件创建滚动表视图

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>
);
}
}