Question

我想将JSON数据映射到平面列表，以便可以从数据库中列出数据。有可能这样做吗？或者还有其他方法可以做到吗？我已经尝试了一整天，希望现在可以解决。

这是我的JSON：

{"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}}

这是我的固定列表代码：

    render() {
        console.log(this.state.retrieveData.id)
        return (
            <View>
                <Text>A</Text>   
                    <FlatList data={this.state.retrieveData}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    >
                        <Text>B</Text>
                    </FlatList>
            </View>
        )
    }```

Answer 1

您需要使用JSON.parse（）解析json才能将其用于平面列表，Flatlist组件也仅接受数组，而不接受对象。如果您想保留Firebase返回的对象键，请尝试首先格式化数据。

Answer 2

首先，您可以解析原始JSON字符串：

const rawData = JSON.parse('{"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}}')

然后转换为值数组：

const data = Object.values(rawData);
/*
// will produce 
  [
{"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, 
{"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}
]
*/

重要：您不应不要在render()内进行操作。随意填充，以使这种转换接近获取。

然后在渲染器中使用数据：

render() {
        console.log(this.state.data)
        return (
            <View>
                <Text>Data</Text>   
                    <FlatList data={this.state.data}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    />
            </View>
        )
    }

Answer 3

您可以执行以下操作-

constructor(props){
    super(props);
    this.state = {retrieveData: []};
}

componentDidMount() {
    // fetch your json here
    const json = {"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}};
    const list = [];
    for(const k in json) {
      list.push({
        id: k,
        ...json[k],
      })
    }
    this.setState({retrieveData: list});
}

然后

render() {
        return (
            <View>
                <Text>A</Text>   
                    <FlatList data={this.state.retrieveData}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    >
                        <Text>B</Text>
                    </FlatList>
            </View>
        )
    }

如何在React Native中将JSON嵌套对象映射到平面列表？

3 个答案: