解析 json 反应本机

Question

我正在使用加密 api 在我的应用程序中加载数据。在我的示例中如何呈现价格？

我正在尝试{item.quotes.price}但没有工作任何解决方案？

我的源代码是：

export default class FetchExample extends React.Component {
constructor(props) {
super(props);
this.state = { isLoading: true };
}
componentDidMount() {
return fetch("https://api.coinmarketcap.com/v2/ticker/?start=1&limit=10&sort=id&structure=array")
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: responseJson.data
},
function() {
}
);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => (
<Text>
{item.name}, {item.symbol}
</Text>
)}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}

有什么解决办法吗？

Tnx都寻求帮助！

Answer 1

您从请求中获取的数据具有item.quotes.UDS.price下的price，而不是item.quotes.price。

还要确保在您的状态下初始化一个空的dataSource数组：

class FetchExample extends React.Component {
constructor(props) {
super(props);
this.state = { isLoading: true, dataSource: [] };
}
componentDidMount() {
return fetch("https://api.coinmarketcap.com/v2/ticker/?start=1&limit=10&sort=id&structure=array")
.then(response => response.json())
.then(responseJson => {
this.setState({
isLoading: false,
dataSource: responseJson.data
});
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => (
<Text>
{item.name}, {item.symbol}, {item.quotes.USD.price}
</Text>
)}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}