Question

我正在设置一个FlatList，并希望它在其中显示我的组件。我做了一个函数“ renderEpisodes”，其中包括我的组件，我想在FlatList中传递该函数，它将向我显示其中包含的所有详细信息。

这是我的FlatList，包含所有代码

import React, { Component } from 'react';
import { ScrollView, FlatList, Text, View, Image } from 'react-native';
import axios from 'axios';
import EpisodeDetail from './EpisodeDetail';
import { Spinner } from './Spinner';

class EpisodeList extends Component {

    state = { episodes: [] };

    componentWillMount() {
        axios.get('http://api.tvmaze.com/shows/1/episodes')
        .then(Response => this.setState({ episodes: Response.data }));
    }

    renderEpisodes() {
       return this.state.episodes.map(episode =>
         <EpisodeDetail key={episode.name} episode={episode} />

         );
    }


    render() {
    return (
        <FlatList
             {this.renderEpisodes()}  
        />





    );
  }

}

export default EpisodeList;

我希望FlatList的输出将向我显示函数“ renderEpisodes”的所有内容，因为它包含了我要显示的所有组件内容。

Answer 1

您可以尝试以下操作，

import React, { Component } from 'react';
import { ScrollView, FlatList, Text, View, Image } from 'react-native';
import axios from 'axios';
import EpisodeDetail from './EpisodeDetail';
import { Spinner } from './Spinner';

class EpisodeList extends Component {

    state = { episodes: [] };

    componentWillMount() {
        axios.get('http://api.tvmaze.com/shows/1/episodes')
        .then(Response => this.setState({ episodes: Response.data }));
    }

    renderEpisodes(episode) {
       return (
         <EpisodeDetail key={episode.name} episode={episode} />

         );
    }


    render() {
    return (
        <FlatList
             data={this.state.episodes}
             renderItem={({item}) => this.renderEpisodes(item)}
        />

    );
  }

}

export default EpisodeList;

Answer 2

renderEpisodes({item,index}) {
   return <EpisodeDetail key={index} episode={item} />
}

......

<FlatList data={this.state.episodes} renderItem={this.renderEpisodes}/>

是否有可以通过功能的FlatList修复程序？

2 个答案: