React使用Axios向Flask接口POST数据时数组字段为空如何解决

问题原因 #

这是典型的异步代码执行顺序问题，核心逻辑如下：

• axios.get 发起的TMDB接口请求是异步操作，JavaScript不会等待它返回结果，会直接执行后续构造params、发起axios.post的逻辑
• 你给params.genres赋值时，axios.get的then回调还没执行，genres还是初始化的空数组，所以post请求里genres字段为空
• 你看到console.log(genres)能输出完整数组，是浏览器控制台的特性：打印引用类型（数组、对象）时，不会立即快照当前值，而是等你展开控制台查看时才读取最新值，所以你看到的是then执行完后的数组，实际赋值时它还是空的。

修复方案 #

方案1：把post请求逻辑移到get请求的回调内 #

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) => {
            // 拿到genre后再构造参数、发post请求
            for (let i = 0; i < req.data.genres.length; i++){
                genres.push(req.data.genres[i].name);
            }
            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
            };
            return axios.post("http://localhost:5000/user", params);
        })
        .then((data) => {
            if (data.data.code === 112) {
                console.log("success alert");
                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,
                });
            }
        })
        .catch(err => {
            console.error('请求出错：', err)
        });
}

方案2：用async/await改写，逻辑更清晰 #

async addMovie(movie) {
    try {
        // 等待TMDB接口返回结果后再执行后续逻辑
        const tmdbRes = await axios.get(
            `https://api.themoviedb.org/3/movie/${parseInt(movie.id, 10)}`,
            {
                params: {
                    api_key: "dontsteelmytmdbkey;)",
                },
            }
        );
        const genres = tmdbRes.data.genres.map(item => item.name);
        // 构造请求参数
        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
        };
        // 发起post请求
        const postRes = await axios.post("http://localhost:5000/user", params);
        if (postRes.data.code === 112) {
            console.log("success alert");
            let newMovies = this.state.movies.filter(item => item.id !== movie.id);
            this.setState({ movies: newMovies });
        } else {
            console.log("Backend error");
            console.log(
                "Error: " + postRes.data.code + " - " + postRes.data.errno
            );
            this.setState({
                showAlert: true,
                alertSeverity: "error",
                alertText: this.state.alertServerError,
            });
        }
    } catch (err) {
        console.error('操作出错：', err);
    }
}

内容的提问来源于stack exchange，提问作者Gandalf The Gray