Axios不POSTing陣列

我有一個 React 應用程式，可以將資料發送到我的自定義 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
        };

當我列印出來params.genres它顯示這樣的東西["Fantasy", "Comedy"]。但是當我發布它時： axios.post("http://localhost:5000/user", params).then((data) => { 有效載荷是： {"id":"id","title":"The Watch","movie_id":80035,"photo":"urltoimage","year":2012,"rating":55,"overview":"overview","genres":[]}

除流派外，所有值都是正確的。在我的后端它說同樣的。怎么了？

我的整個功能：

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("/");
    }

uj5u.com熱心網友回復：

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

在 addMovie 函式之前使用 async 關鍵字使您的 addMovie 函式異步。

你為什么需要這個？因為你必須等到 axios 回應

為了更好地理解，您可以閱讀有關 Async Await 的更多資訊

uj5u.com熱心網友回復：

這些 axios 呼叫目前都是異步的，它們不會等待彼此解決。嘗試像這樣修改您的代碼以等待第一個呼叫得到解決，然后回圈遍歷型別。

// 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("/");
}

uj5u.com熱心網友回復：

它不是等待執行 API 呼叫，您應該使用 async 和 await。我在下面的代碼中添加了：

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 = {

標籤：javascript 数组 反应 json 公理

上一篇：從字串到鋸齒狀的字符陣列

下一篇：更新函式中的字串陣列