javascript - react-native 获取 api 数组

Question

我正在尝试获取 facebook movie data使用公理。在我的控制台中，我看到了获取的数据，但我无法访问标题文本。

 class BoardScreen extends Component {

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

        componentWillMount() {
          axios.get('https://facebook.github.io/react-native/movies.json')
            .then(response => this.setState({ movies: response.data }));
        }

renderMovies() {
return this.state.movies.movies.map(movies => <Text>{movies.title}</Text>)
}

      render() {
if(this.state.movies.length === 0) {
     return null;
   }
        console.log(this.state.movies.title, 'movies')

        return (
          <View>
          {this.renderMovies()}
          </View>
                )
              }
            }

上面的代码只会给我主标题文本 The Basics - Networking 我真正想要的是访问每个电影标题和显示。

如何获取每个数组标题？

Answer 1

您需要的是遍历它并绑定(bind)数据。

this.state.movies.movies.map(a=>{
           return <div key={a.id}>{a.title}</div>
        })       

当然你需要检查电影是否不为空，所以渲染应该是这样的

  render() {

    if(this.state.movies.length === 0) {
      return null;
    }
    console.log(this.state.movies.movies, 'movies');

    return (
        this.state.movies.movies.map(a=>{
           return <div key={a.id}>{a.title}</div>
        })       

    )
  }

Demo

IMO，如果你只看过 here 会非常非常容易