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获取数据，这是一个音乐曲目。

首先，我尝试保留相同的代码，只更改网址。我得到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>
    );
  }
}

如何在react-native

1 个答案: