React Native state isn't changing

Question

I'm making a Ajax request to a Json file that return some movies.

    state = { movies: [] };

    componentWillMount()
    {
        this.getMovies();
    }

    /*
       Make an ajax call and put the results in the movies array
     */
    getMovies()
    {
        axios.get('https://pastebin.com/raw/FF6Vec6B')
            .then(response => this.setState({ movies: response.data }));
    }



    /*
        Render every movie as a button
     */
    renderMovies()
    {
        const { navigate } = this.props.navigation;

        return this.state.movies.map(movie =>
            <ListItem key={ movie.title }
                title={ movie.title }
                icon={{ name: 'home' }}
                onPress={() =>
                    navigate('Details', { title: movie.title, release: movie.releaseYear })
                }
            />
        );
    }

    render() {
        return(
            <List>
                { this.renderMovies() }
            </List>
        );
    }

The error I get is the following: this.state.map is not a function. This is because movies is still empty.

When I console.log response.data it returns all the rows from the JSON file. So the problem is most likely in this line:

.then(response => this.setState({ movies: response.data }));

Does someone know what's wrong?

Check this https://stackoverflow.com/questions/47027035/why-is-my-react-component-this-state-updateclothing-saying-undefined-even-thou/47028520#47028520 — Shubham Khatri, Nov 22 '17 at 11:47
@Raiders Your json response is in incorrect format. Please check it out. — Jason, Nov 23 '17 at 04:43

score 0 · Answer 1 · answered Nov 23 '17 at 08:07

You put initial state in the wrong place. Do this instead:

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

From document:

In general, you should initialize state in the constructor, and then call setState when you want to change it.

score -1 · Answer 2 · answered Nov 22 '17 at 11:52

Update you ajax request as following:

/*
   Make an ajax call and put the results in the movies array
 */
getMovies()
{
    let self = this;
    axios.get('https://pastebin.com/raw/FF6Vec6B')
        .then(response => self.setState({ movies: response.data }));
}

Also, you can bind your function inside constructor as:

constructor(props){
  super(props);
  this.getMovies = this.getMovies.bind(this);
}

React Native state isn't changing

2 Answers2