如何处理json数据将其放入FlatList中，并使用numColumns = {2}？

Question

我问了类似的问题，但我发现我真正的问题是如何处理我的jsondata并将其归还。

在我的情况下，我无法弄清楚如何映射数据并仅使用一个<View>返回数据。在我的函数renderRow中，看起来我返回了两个<View>因为我无法在numColumns={2}中设置FlatList。它会显示错误Element type is invalid

任何人都可以救我脱离这个世界。我卡在这里。

这是我的App.js我获取API来获取jsondata：

import React from 'react';
import { View, Image, FlatList } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.state = { movies: [] };
  }

  componentWillMount() {
    fetch('https://obscure-reaches-65656.herokuapp.com/api?city=ThisWeek')
      .then(response => response.json())
      .then(responseData => {
        console.log(responseData);
        this.setState({ movies: responseData });
      })
      .catch((error) => console.log(error));
  }

  renderRow(movies) {
    console.log('renderRow => ');
    console.log(movies)
    return movies.item.movie.map(movie => 
      <View>
        <Image source={{ uri: movie.photoHref}} style={{ height: 150, width: 150 }} />
      </View>
    );
  }

  render() {
    const movies = this.state.movies;
    console.log('render');
    console.log(movies);
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={movies}
          renderItem={this.renderRow}
          horizontal={false}
          keyExtractor={(item, index) => index}
          numColumns={2}
        />
      </View>
    );
  }
}

这是我的调试控制台：

Answer 1

您需要正确使用您的响应数据，我做了一些更改，并且每行能够看到2张图片，这里是更改

更改了将电影设置为州的方式

this.setState({ movies: responseData[0].movie });

您需要在访问 responseData [0] 之前先采取预防措施，我只是访问它以查看结果

更改了renderRow，如下所示

renderRow({item: movie}) {
    return (
       <View>
           <Image source={{ uri: movie.photoHref}} style={{ height: 150, width: 150 }} />
       </View>
    );
}

休息一下。

希望这会有所帮助！