React Native FlatList is not rendering using state value

Question

I'm getting data from API (using Redux Saga) and I want to show the data in a FlatList. In ComponentDidMount I'm dispatching the action to hit the API. Data are getting without any issue. But for the first time , data is not showing in the flatlist. If I enter Ctrl + S (Save) in VS code data is showing. I want to have set

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>

    );
}

}

function mapStateToProps(state) {

return {
   movieList : state.movieListReducer.movieList

};

}

export function mapDispatchToProps(dispatch) { return{

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

}

}

export default connect( mapStateToProps, mapDispatchToProps )(MovieDetailsScreen);

I tried adding a loader in flatlist until the data is getting loaded , but it's not working. Please note that I need to use setState({data:movieList}) because in future I have more implementations , so I couldn't use this.props.movieList in flatlist data

Try adding extraData={this.state.data}. Read more about that prop at reactnative.dev/docs/flatlist#extradata — Dan
– Dan, Commented Mar 8, 2020 at 16:16

Anurodh Singh · Accepted Answer · 2020-03-08 15:54:58Z

1

You should call the this.setState({data:movieList}) method in componentDidUpdate because componentDidMount only runs for the first time.

Your code should be like this,

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})
   }
}

edited Mar 8, 2020 at 15:54

answered Mar 8, 2020 at 15:42

Anurodh Singh

8106 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

code.hesh Over a year ago

Cannot do that. Then getting Invariant Violaion : Maximum update depth exceeded

Anurodh Singh Over a year ago

Yes, I have missed a condition for the props comparison. Please check the updated code above.

theocikos · Accepted Answer · 2020-03-08 16:21:12Z

1

You should create a new function to hold the fetching of the data and to give you an option to create the loader.

First add a loading option to your state:

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

Then create the function:

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

Call the function in componentDidMount:

componentDidMount(){
   this.fetchMovieList();
}

and in your render() set according to loading if it true show an empty view and if it is false show the flat list:

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.

answered Mar 8, 2020 at 16:21

theocikos

2,0821 gold badge11 silver badges8 bronze badges

1 Comment

Falady Over a year ago

I'm having a somewhat similar issue but in my case the data is not loaded immediately as it should be, initially it renders a string of number like 1120939 but after pressing CTRL+S it renders back to normal value that I wanted, etc 34. What could possibly the cause?

Collectives™ on Stack Overflow

React Native FlatList is not rendering using state value

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related