Question

我想按json显示此FlatList数据，但看不到任何结果。我看到了所有这样的问题，但是其他问题却不能解决我的问题。

Json数据（console.log(responseJson);）：

1: {title: "Shirt", type: "one", cost: "3500", cat: null, end: "1"}
2: {title: "Shirt", type: "two", cost: "4000", cat: null, end: "0"}
3: {title: "Shirt", type: "three", cost: "7000", cat: null, end: "2"}

代码：

constructor(props) {
    super(props);
    this.state = {
        dataSource: null,
        isLoading: true,
    }
}

componentDidMount() {
    fetch('products.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json'
        },
        body: JSON.stringify({
            id: 4
        })
    })
    .then((response) => response.json())
    .then((responseJson) => {
            console.log(responseJson);
            this.setState({
                dataSource: responseJson,
                isLoading: false,
            });
        }    
    })
    .done();

}

return (
    <Container style={{ backgroundColor: '#f5f5f5' }}>
        <Header>
            <Title>{this.props.navigation.getParam('title')}</Title>
        </Header>
        <View style={{ margin: 10, borderRadius: 3 }}>
            <FlatList
                data={this.state.dataSource}
                renderItem={({ item }) =>
                    <View>
                        <Text>{item.title} - {item.type}</Text>
                        <Text>{item.cost.replace(/<(?:.|\n)*?>/gm, '')}$</Text>
                        <TouchableOpacity onPress={this.decrementCount} activeOpacity={0.5}>
                            <AntDesign name="minus" size={15} style={{ color: '#fff' }} />
                        </TouchableOpacity>
                        <Text>{this.state.quantity}</Text>
                        <TouchableOpacity onPress={this.incrementCount} activeOpacity={0.5}>
                            <AntDesign name="plus" size={15} style={{ color: '#fff' }} />
                        </TouchableOpacity>
                    </View>
                }
            />
        </View>
    </Container>
)

Answer 1

FlatList数据道具中需要一个数组，但是json是一个对象。

尝试一下

<FlatList
    data={[
        {title: "Shirt", type: "one", cost: "3500", cat: null, end: "1"},
        {title: "Shirt", type: "two", cost: "4000", cat: null, end: "0"},
        {title: "Shirt", type: "three", cost: "7000", cat: null, end: "2"},
    ]
...

如何通过flatList显示Json数据？

1 个答案: