React Native FlatList не выполняет рендеринг с использованием значения состояния - PullRequest
Новая
       6

React Native FlatList не выполняет рендеринг с использованием значения состояния

0 голосов
/ 08 марта 2020

Я получаю данные из API (используя Redux Saga) и хочу показать данные в FlatList. В ComponentDidMount я отправляю действие, чтобы поразить API. Данные получаются без проблем. Но впервые данные не отображаются в плоском списке. Если я ввожу Ctrl + S (Сохранить) в коде VS, данные отображаются. Я хочу установить 

class MovieDetailsScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
        data:[],

    };
}

componentDidMount(){
   this.props.getMovieData();
   if(this.props.movieList){
       this.setState({data:movieList})
   }
}


renderItem = ({ item }) => {
    return(
    <View style={styles.mainContainer}> 

        <View style={styles.textContainer}>
            <Text >{item.movieName}</Text>
            <Text >{item.movieDescription}</Text>
        </View>


    )
}

render() {

    return (
        <View >

            <FlatList  
                keyExtractor={(item, index) => index.toString()}
                data={this.state.data}
                renderItem={this.renderItem}
            /> 

        </View>

    );
}

}

функция mapStateToProps (состояние) {

return {
   movieList : state.movieListReducer.movieList

};

}

функция экспорта mapDispatchToProps (dispatch) { return {

     getMovieData: () => dispatch(movieListActions.getMovieData()),

}

}

экспорт по умолчанию connect (mapStateToProps, mapDispatchToProps) (MovieDetailsScreen);

Я пытался добавить загрузчик в плоский список, пока данные не загружаются, но это не работает Обратите внимание, что мне нужно использовать setState ({data: movieList}), потому что в будущем у меня будет больше реализаций, поэтому я не смог использовать this.props.movieList в данных плоского списка

Ответы [ 2 ]

1 голос
/ 08 марта 2020

Вам следует создать новую функцию для хранения выборки данных и дать вам возможность создать загрузчик.

Сначала добавьте опцию загрузки в ваше состояние: 

this.state = {
    data:[],
    loading: false,
};

Затем создайте функцию: 

   fetchMovieList = () => {
       this.setState({ loading: true })
    this.props.getMovieData()
     .finally( () => {
         this.setState({ loading: false })
            if(this.props.movieList){
              this.setState({data:movieList})
      }
  }

Вызовите функцию в componentDidMount: 

componentDidMount(){
   this.fetchMovieList();
}

и в вашем render (), установленном в соответствии с загрузкой, если true показывает пустой вид и если ложь показать плоский список: 

render() {
    if (this.state.loading) {
        return (
            <View>
                <Text> Loading </Text>
            </View>
        );
    }
    return (
        <View >
        <FlatList  
            keyExtractor={(item, index) => index.toString()}
            data={this.state.data}
            renderItem={this.renderItem}
        /> 

    </View>

);
}
Instead of the text loading you can use the ActivityIndicator provided by react-native. Please check if i missed any semicolon or parentheses.
1 голос
/ 08 марта 2020

Вы должны вызвать метод this.setState ({data: movieList}) в componentDidUpdate, так как componentDidMount запускается только в первый раз.

Ваш код должен быть таким, 

componentDidMount(){
   this.props.getMovieData();
}

// This method will execute everytime a state or props change.
componentDidUpdate(prevProps){
   if(this.props.movieList != prevProps.movieList){
       this.setState({data:this.props.movieList})
   }
}
...