我獲取我的 json 資料，我想用資料表顯示它。問題是，我的 FlatList 組件為每個專案創建一個新的資料表，但我想要一個 DataTable 用于我的所有專案。
我沒有找到如何修復它。我在這里分享所有代碼。請問你能幫幫我嗎 ？謝謝
import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList, Dimensions, ActivityIndicator } from 'react-native';
import { DataTable } from 'react-native-paper';
export default class Bien extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
};
}
async getAll() {
try {
const response = await fetch('myJsonData');
const json = await response.json();
this.setState({ data: json.table });
} catch (error) {
console.log(error);
} finally {
this.setState({ isLoading: false });
}
}
componentDidMount() {
this.getAll();
}
renderItem = ({ item, index }) => {
return (
<View>
<DataTable>
<DataTable.Header>
<DataTable.Title>Type</DataTable.Title>
<DataTable.Title>Ville</DataTable.Title>
<DataTable.Title numeric>Prix</DataTable.Title>
</DataTable.Header>
<DataTable.Row>
<DataTable.Cell>{item.Category}</DataTable.Cell>
<DataTable.Cell>{item.Ville}</DataTable.Cell>
<DataTable.Cell numeric>{item.Prix}</DataTable.Cell>
</DataTable.Row>
</DataTable>
</View>
);
};
render() {
const { data, isLoading } = this.state;
return (
<FlatList
data={data}
renderItem={this.renderItem}
/>
);
}
};
uj5u.com熱心網友回復：
您的 FlatList 正在為每個專案回圈并創建一個 DataTable。您可以改為將 Data.Row 元素包裝在 FlatList 中。
<DataTable>
<DataTable.Header>
<DataTable.Title>Dessert</DataTable.Title>
<DataTable.Title numeric>Calories</DataTable.Title>
<DataTable.Title numeric>Fat</DataTable.Title>
</DataTable.Header>
<FlatList data={data} renderItem={_renderItem} />
</DataTable>
完整的作業示例：https : //snack.expo.dev/@tnr_c/scrollable-datatable
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/392314.html
標籤：javascript 反应原生