Question

我正在从数据库中获取数据，并使用平面列表和listitem在UI上显示它们。我在一个屏幕上获取数据，然后使用导航道具将数据发送到下一屏幕。一切正常，但是当我使用flatlist和listitem显示数据时，所有数据都聚集在一行上。我试图在后端的php代码中使用换行符，但这行不通。

我尝试在javascript中使用RegExp来分隔数据，但这不起作用。我觉得自己缺少了一些很小的东西，我只是无法将手指放在上面。

这是我的提取方法，可从后端获取数据并将其发送到下一个屏幕。

_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>

当我console.log数据时，这是我将得到的示例。[“ sam123”，“ beth345”]。它将像这样显示在我的列表项中。全部在一行上。。。sam123beth345。请帮忙。

Answer 1

尝试这样：

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);
    return (
        <View style={styles.container}>
            <MenuButtonWS navigation={this.props.navigation} />
            <FlatList
                data={cust1}
                extraData={this.state}
                keyExtractor={(item, index) => index.toString()}
                //numColumns={numColumns}
                renderItem={({ item, index }) => (
                    <ListItem
                    titleStyle={{ color: 'black', fontWeight: 'bold'}}
                    title={item}
                    bottomDivider
                    chevron
                    />
                )}
            />
        </View>

如果const cust1 = JSON.stringify(cust);看起来像这样：[“ sam123”，“ beth345”]，那么这应该可以工作。

在此处查看有效示例：snack example 如果不起作用，请输入console.log数据，cust && cust1

更新

render() {
    const  { navigation } = this.props;
    const cust = navigation.getParam('party', 'No-User');
    const other_param = navigation.getParam('otherParam', 'No-User');

    data = [...cust]
    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>

使用Flatlist和Listitem从数据库中响应本机获取项目以显示数据

1 个答案: