如何在 react-native 中操作单个对象 JSON 的获取响应

Question

我正在使用 react-native 创建我的第一个移动应用程序。我正在使用 axios 从 wordpress 网站获取数据。

我成功地从带有音乐曲目列表的数组 JSON 中获取数据。然后我将数据插入到一个state变量中。然后，我使用.map函数在屏幕上显示内容。这是一个有效的示例代码：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

export default class FreshTracks extends Component {
    state={tracks:[]}
    componentDidMount(){
        axios.get("https://<URL for JSON list of tracks>")
            .then(response => this.setState({tracks:response.data}))
            .catch(function(error) {
                console.log('Fetch error: ' + error.message);
                });
    }  
    renderTracks(){
        return this.state.tracks.map (track =>
            <View key={track.id}>
                <Text>{track.title.rendered}</Text>
                <Text>{track.content.rendered}</Text>
            </View>
        )  
    }
    render() {
        return (
            <View>    
                {this.renderTracks()}
            </View>
        );
    }
}

现在，我正在努力从单个对象 JSON（一首音乐曲目）中获取数据。

起初，我尝试保留相同的代码，只更改 url。我明白了Fetch error: this.state.tracks.map is not a function。我想console.log(this.state.tracks)之前return在renderTracks()和数据返回到控制台中的对象，究竟应该如何。

然后我尝试将state初始化更改为：state={tracks:*{}*}而不是state={tracks:*[]*}. 另外，我将renderTracks()功能更改为：

renderTracks(){
        return (
            <View>
                <Text>{this.state.tracks.id}</Text>
                <Text>{this.state.tracks.slug}</Text>
                <Text>{this.state.tracks.title.rendered}</Text>
                <Text>{this.state.tracks.content.rendered}</Text>
            </View>
        )
    }

这种方式部分工作在单个级别上访问数据，this.state.tracks.id或者this.state.tracks.slug按预期工作。访问多级数据如this.state.tracks.title.rendered抛出错误：

Cannot read property 'rendered' of undefined

我应该怎么做才能从单个对象 JSON 中正确获取数据？

Answer 1

JSON 对象没有map()方法。所以你假设this.state.tracks是一个数组的代码会崩溃。

相反，您希望保持this.state.track原样null，然后用一个对象填充它。不要忘记检查null渲染并显示某种占位符。

这样的事情可能会奏效？

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

export default class FreshTracks extends Component {
  state = {track: null};

  componentDidMount(){
    axios.get("https://<your URL for a single track>")
         .then(response => this.setState({track:response.data}))
         .catch(function(error) {
           console.log('Fetch error: ' + error.message);
         });
  }  

  render() {
    const track = this.state.track;
    if (track === null) {
      return <View><Text>Loading...</Text></View>;
    }

    return (
      <View>
        <Text>{track.title.rendered}</Text>
        <Text>{track.content.rendered}</Text>
      </View>
    );
  }
}