【发布时间】：2020-07-21 15:32:23
【问题描述】：
我正在从我的数据库中获取数据并使用 flatlist 和 listitem 将其显示在我的 UI 上。我在一个屏幕上获取数据，然后使用导航道具将该数据发送到下一个屏幕。一切正常，但是当我使用 flatlist 和 listitem 显示数据时，所有数据都集中在一行上。我尝试在后端的 php 代码中使用换行符，但它不起作用。
我曾尝试在 javascript 中使用 RegExp 来分隔数据，但这不起作用。我觉得我错过了这么小的东西，我就是不能指望它。
这是我的 fetch 方法，它从我的后端抓取数据并将其发送到下一个屏幕。
_openTable = (item) => {
fetch('URL', {
method: 'POST',
body: JSON.stringify({tablenumber: item}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => response.text())
.then((responseJson) => {
this.setState({
dataSource: responseJson,
});
console.log(responseJson)
alert(responseJson)
this.props.navigation.navigate('ViewParty', {
party: responseJson,
otherParam: '101',
});
})
.catch((error) => {
console.log(error);
});
}
GetGridViewItem(uname) {
Alert.alert(uname);
}这是我从最后一个屏幕获取数据并通过 Flatlist 和 Listitem 显示的代码。
constructor(props) {
super(props);
this.state = {
dataSource: [],
}
}
render() {
const { navigation } = this.props;
const cust = navigation.getParam('party', 'No-User');
const other_param = navigation.getParam('otherParam', 'No-User');
const cust1 = JSON.stringify(cust);
const cust2 = cust1.replace(/[\])}[{(]/g, '');
const cust3 = cust2.replace(/[""]/g, '');
const cust4 = cust3.replace(/[,]/g, '');
const cust5 = cust4.replace(/[\\]/g, '');
let data = this.state.dataSource;
data.push([cust5]);
return (
<View style={styles.container}>
<MenuButtonWS navigation={this.props.navigation} />
<FlatList
data={data}
extraData={this.state}
keyExtractor={(item, index) => index.toString()}
//numColumns={numColumns}
renderItem={({ item, index }) => (
<ListItem
titleStyle={{ color: 'black', fontWeight: 'bold'}}
title={`${item}`}
bottomDivider
chevron
/>
)}
/>
</View>当我控制台记录数据时，这是我将获得的示例..["sam123","beth345"]。它会像这样显示在我的列表项中。全部在一条线上.... sam123beth345。请帮忙。
【问题讨论】：
-
.then((response) => response.text())应该是.then((response) => response.json())可能 -
非常感谢您回复@skorp。我尝试了 .text() 和 .json() ，它们都给了我相同的结果。我在代码的其他部分使用相同的方式从数据库中获取数据，并且工作正常。我就是不明白。
-
数据似乎被转换成一个大字符串而不是一个数组。返回给您的数据是什么格式的？为什么需要使用正则表达式转换为数组？也许您可以发布返回给您的原始数据以及格式化数组的完整 console.log。
-
如果我运行你所有的 cust*.replaces cust5 的最后一个输出是： sam123beth345 删除它们应该可以工作。需要
JSON.stringify(cust);不要删除为什么需要这个替换？ -
@RossHochwert 非常感谢您的回复。是的，它显示为一个大字符串。它作为数组返回。我正在使用正则表达式来删除括号和引号。当我控制台记录它时，我得到 ["sam123","beth345"]。我只是想让用户名适合列表项。
标签： javascript react-native react-native-flatlist listitem react-native-elements