I have a React app that sends data to my custom Flask API.

const params = {
            id: this.props.user.uid,
            title: movie.title,
            movie_id: parseInt(movie.id, 10),
            photo: "https://image.tmdb.org/t/p/w500/"   movie.backdrop_path,
            year: parseInt(movie.release_date.split("-")[0], 10),
            rating: parseInt(parseFloat(movie.vote_average) * 10, 10),
            overview: movie.overview,
            genres: genres
        };

When I print out params.genres it show something like this ["Fantasy", "Comedy"]. But when I post it: axios.post("http://localhost:5000/user", params).then((data) => { The payload is: {"id":"id","title":"The Watch","movie_id":80035,"photo":"urltoimage","year":2012,"rating":55,"overview":"overview","genres":[]}

All of the value are correct except the genres. And in my backend it says the same. What's wrong?

My whole function:

addMovie(movie) {
        //get more data from tmdb
        var genres = [];
        axios
            .get(
                "https://api.themoviedb.org/3/movie/"  
                    parseInt(movie.id, 10),
                {
                    params: {
                        api_key: "dontsteelmytmdbkey;)",
                    },
                }
            )
            .then((req) => {
                for (let i = 0; i < req.data.genres.length; i  ){
                    genres.push(req.data.genres[i].name);
                }
            });
        console.log(genres);
        const params = {
            id: this.props.user.uid,
            title: movie.title,
            movie_id: parseInt(movie.id, 10),
            photo: "https://image.tmdb.org/t/p/w500/"   movie.backdrop_path,
            year: parseInt(movie.release_date.split("-")[0], 10),
            rating: parseInt(parseFloat(movie.vote_average) * 10, 10),
            overview: movie.overview,
            genres: genres
        };
        console.log(params.genres);
        axios.post("http://localhost:5000/user", JSON.stringify(params)).then((data) => {
            if (data.data.code === 112) {
                // success alert
                console.log("success alert");
                // remove movie from list
                let newMovies = this.state.movies;
                for (let i = 0; i < newMovies.length; i  ) {
                    if (newMovies[i].id === movie.id) {
                        newMovies.splice(i, 1);
                    }
                }
                this.setState({ movies: newMovies });
            } else {
                console.log("Backend error");
                console.log(
                    "Error: "   data.data.code   " - "   data.data.errno
                );
                this.setState({
                    showAlert: true,
                    alertSeverity: "error",
                    alertText: this.state.alertServerError,
                });
            }
        });

        // dont redirect
        //this.props.history.push("/");
    }

CodePudding user response：

var genres = [];
        const res = await axios
            .get(
                "https://api.themoviedb.org/3/movie/"  
                    parseInt(movie.id, 10),
                {
                    params: {
                        api_key: "dontsteelmytmdbkey;)",
                    },
                }
            )
            
            for (let i = 0; i < req.data.genres.length; i  ){
                    genres.push(req.data.genres[i].name);
            }

Make your addMovie function asynchronous use async keyword before addMovie function.

why you need this? because you have to wait until axios response

for your better understanding you can read more about Async Await

CodePudding user response：

These axios calls are both async at the moment and they don't wait for each other to be settled. Try modifying your code like this to wait for the first call to be resolved then then loop over the genres.

// add async to function definition 
async function addMovie(movie) {
  // get more data from tmdb
  const genres = [];
  try {
    const response = await axios.get('https://api.themoviedb.org/3/movie/'   parseInt(movie.id, 10), {
      params: {
        api_key: 'dontsteelmytmdbkey;)',
      },
    });

    for (let i = 0; i < response.data.genres.length; i  ) {
      genres.push(response.data.genres[i].name);
    }
  } catch (error) {
    console.error(error);
  }
  console.log(genres);
  const params = {
    id: this.props.user.uid,
    title: movie.title,
    movie_id: parseInt(movie.id, 10),
    photo: 'https://image.tmdb.org/t/p/w500/'   movie.backdrop_path,
    year: parseInt(movie.release_date.split('-')[0], 10),
    rating: parseInt(parseFloat(movie.vote_average) * 10, 10),
    overview: movie.overview,
    genres: genres,
  };
  console.log(params.genres);
  axios.post('http://localhost:5000/user', JSON.stringify(params)).then((data) => {
    if (data.data.code === 112) {
      // success alert
      console.log('success alert');
      // remove movie from list
      let newMovies = this.state.movies;
      for (let i = 0; i < newMovies.length; i  ) {
        if (newMovies[i].id === movie.id) {
          newMovies.splice(i, 1);
        }
      }
      this.setState({ movies: newMovies });
    } else {
      console.log('Backend error');
      console.log('Error: '   data.data.code   ' - '   data.data.errno);
      this.setState({
        showAlert: true,
        alertSeverity: 'error',
        alertText: this.state.alertServerError,
      });
    }
  });

  // dont redirect
  // this.props.history.push("/");
}

CodePudding user response：

It's not waiting to execute the API call you should use async and await. I've added in below code:

addMovie(movie) async {
    //get more data from tmdb
    var genres = [];
    await axios
        .get(
            "https://api.themoviedb.org/3/movie/"  
                parseInt(movie.id, 10),
            {
                params: {
                    api_key: "dontsteelmytmdbkey;)",
                },
            }
        )
        .then((req) => {
            for (let i = 0; i < req.data.genres.length; i  ){
                genres.push(req.data.genres[i].name);
            }
        });
    console.log(genres);
    const params = {