Reactjs React Axios post error 400错误请求，不应具有其他属性

我是React.js中的新手，正在尝试将React中表单中的数据发布到本地主机服务器

我检索的数据来自TMDB，它由具有特定id的电影属性组成。 我在useEffect中使用axios，用于get查询，它们工作得很好。 然后使用useState设置电影数据。 我用它来预先填写表格。它是一个add movie表单，提交时，formData应该添加到localhost服务器json数据库中。 为此，我使用axios post，这里就是我卡住的地方。 已经尝试了很多事情，但都没有效果。 谢谢所有能帮我的人

代码如下：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useHistory } from "react-router-dom";
import './AddMovie.scss';

const AddMovieForm = (props) => {

    const movieID = props.movie.id;
    const [actors, setActors] = useState([]);
    const [similarMovies, setSimilarMovies] = useState([]);
    const [movies, setMovies] = useState({
        title: "",
        release_date: "",
        categories: [],
        description: "",
        poster: "",
        backdrop: "",
    });

    /* QUERY FOR THE MOVIE CAST & SIMILAR MOVIES */

    const API_KEY = process.env.REACT_APP_API_KEY;
    const base_url = `https://api.themoviedb.org/3`;

    useEffect(() => {
        axios.get(`${base_url}/movie/${movieID}?api_key=${API_KEY}&language=en-US&page=1`)
            .then((response) => {
            setMovies({
                id: response.data.id,
                title: response.data.title,
                release_date: response.data.release_date,
                categories: response.data.genres,
                description: response.data.overview,
                poster: `https://image.tmdb.org/t/p/w342${response.data.poster_path}`,
                backdrop: `https://image.tmdb.org/t/p/w342${response.data.backdrop_path}`,
            });
            // console.log(response.data, movieData.categories);
        }).catch((error) => {
            console.log(error);
        });  

        axios.get(`${base_url}/movie/${movieID}/credits?api_key=${API_KEY}`)
        .then((r) => {
            // console.log(r.data.cast.slice(0, 3));
            setActors(r.data.cast.slice(0, 3));
        }).catch((error) => {
            console.log(error);
        });

        axios.get(`${base_url}/movie/${movieID}/similar?api_key=${API_KEY}&language=en-US&page=1`)
        .then((r) => {
            // console.log(r.data.results.slice(0, 3));    
            setSimilarMovies(r.data.results.slice(0, 3));
        }).catch((error) => {
            console.log(error);
        });  
    }, [base_url, movieID]);
    
    const history = useHistory();
    const imgUrl = "http://image.tmdb.org/t/p/w342";

    const actorsData = actors.map(item => {
        return ({
                name: item.name,
                photo: imgUrl + item.profile_path,
                character: item.character
            }
        )
    });
    const similarMoviesData = similarMovies.map(item => {
        return ({
                title: item.title,
                poster: imgUrl + item.poster_path,
                release_date: item.release_date
            }
        )
    });
    
    // console.log(similarMoviesData);

    /* FORM */

    const formData = {
        title: movies.title,
        release_date: movies.release_date,
        categories: movies.categories.map(c => c.name),
        description: movies.description,
        poster: movies.poster,
        backdrop: movies.backdrop,
        actors: actorsData,
        similar_movies: similarMoviesData,
        id: movies.id
    };

    const LOCAL_URL = "http://localhost:3000/movies";

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(formData);
        axios.post(LOCAL_URL, formData,
        {
           headers: {
            'Content-Type': 'application/json',
           } 
        })
        .then(response => {console.log(response)})
        .catch((error) => console.log(error) );
        history.push('/');
        // setRedirectTo('/movies');
    };
    
    return (
        <div className={!props.showForm ? "form-wrapper" : "form-wrapper--active"}>
            <form onSubmit={handleSubmit}>
                {/* MOVIE */}
                <div className="form-top-wrapper">
                    {/* movie title */}
                    <div className="title-input-wrapper">
                    <h4>Title</h4>
                        <div className="title-input">
                            <input
                            className=""
                            type="text"
                            id="title"
                            name="title"
                            value={formData.title}
                            placeholder=""
                            required
                            />
                        </div>
                    </div>
                    {/* movie release date */}
                    <div className="release-date-input-wrapper">
                        <h4>Release Date</h4>
                        <div className="release-date-input">
                            <input
                            className=""
                            type="text"
                            id="release-date"
                            name="release_date"
                            value={formData.release_date}
                            placeholder=""
                            />
                        </div>
                    </div>
                </div>
                <div className="form-description-wrapper">
                    {/* movie description */}
                    <div className="description-input-wrapper">
                    <h4>Synopsis</h4>
                    <textarea
                    className=""
                    rows="3"
                    cols="90"
                    id="description"
                    name="description"
                    value={formData.description}
                    placeholder=""
                    readOnly
                    />
                    </div>
                </div>
                <div className="form-bottom-wrapper"> 
                    {/* movie categories */}
                    <div className="form-categories">
                        <h4>Categories</h4>
                        <ul className="categories-list">
                           <li key="">
                                <label htmlFor="categories">Name</label>
                                <input
                                className=""
                                type="text"
                                id="categories"
                                name="categories"
                                value={formData.categories}
                                placeholder=""
                                />
                            </li>
                        </ul>   
                    </div>
                    {/* ACTORS */}
                    <div className="form-actors">
                        <h4>Actors</h4>
                        <ul className="actors-list">
                        {actors.map(a => (
                            <li key={a.id}>
                                {/* actors name */}
                                <label htmlFor="actorName">Name</label>
                                <input
                                className=""
                                type="text"
                                id="actor-name"
                                name="actors"
                                value={a.name}
                                placeholder=""
                                />
                                {/* actors character */}
                                <label htmlFor="actorCharacter">Characters</label>
                                <input
                                className=""
                                type="text"
                                id="actor-character"
                                name="actors"
                                value={a.character}
                                placeholder=""
                                />
                            </li>
                            ))}
                        </ul>
                    </div>
                    {/* SIMILAR MOVIES */}
                    <div className="form-similar-movies">
                        <h4>Similar Movies</h4>
                        <ul className="similar-movies-list">
                        {similarMovies.map(sm => (
                            <li key={sm.id}>
                                {/* similar movies title */}
                                <label htmlFor="similarMovieTitle">Title</label>
                                <input
                                className=""
                                type="text"
                                id="similar-movie-title"
                                name="similar_movies"
                                value={sm.title}
                                placeholder=""
                                />
                                {/* similar movies release_date */}
                                <label htmlFor="similarMovieReleaseDate">Release Date</label>
                                <input
                                className=""
                                type="text"
                                id="similar-movie-release-date"
                                name="similar_movies"
                                value={sm.release_date}
                                placeholder=""
                                />
                           </li>
                           ))}
                        </ul>
                    </div>
                </div>
                <button className="btn btn-info" type="submit">
                <span>Ajouter le film à votre bibliothéque</span>
                </button>
            </form>
        </div>
    );
};

export default AddMovieForm;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从“react router dom”导入{useHistory}；
导入“/AddMovie.scss”；
const AddMovieForm=（道具）=>{
const movieID=props.movie.id；
const[actors，setActors]=useState（[]）；
const[similarMovies，setSimilarMovies]=useState（[]）；
const[movies，setMovies]=useState({
标题：“，
发布日期：“，
类别：[]，
说明：“，
海报：「，
背景：“，
});
/*查询电影演员阵容和类似电影*/
const API_KEY=process.env.REACT_APP_API_KEY；
常量基本url=`https://api.themoviedb.org/3`;
useffect（（）=>{
get（`${base\u url}/movie/${movieID}？api\u key=${api\u key}&language=en-US&page=1`）
。然后（（响应）=>{
布景电影({
id:response.data.id，
标题：response.data.title，
发布日期：response.data.release\u日期，
类别：response.data.genres，
说明：response.data.overview，
海报：`https://image.tmdb.org/t/p/w342${response.data.poster_path}`，
背景：`https://image.tmdb.org/t/p/w342${response.data.background\u path}`，
});
//日志（response.data、movieData.categories）；
}).catch（（错误）=>{
console.log（错误）；
});  
get（`${base\u url}/movie/${movieID}/credits？api\u key=${api\u key}`）
。然后（（r）=>{
//log（r.data.cast.slice（0,3））；
setActors（r.data.cast.slice（0,3））；
}).catch（（错误）=>{
console.log（错误）；
});
get（`${base\u url}/movie/${movieID}/similor？api\u key=${api\u key}&language=en-US&page=1`）
。然后（（r）=>{
//log（r.data.results.slice（0,3））；
设置模拟电影（r.data.results.slice（0,3））；
}).catch（（错误）=>{
console.log（错误）；
});  
}，[base_url，movieID]）；
const history=useHistory（）；
常量imgUrl=”http://image.tmdb.org/t/p/w342";
const actorsData=actors.map（项=>{
返回({
名称：item.name，
照片：imgUrl+item.profile\u路径，
字符：item.character
}
)
});
const similarMoviesData=similarMovies.map（项=>{
返回({
标题：item.title，
海报：imgUrl+item.poster\u路径，
发布日期：item.release\u日期
}
)
});
//console.log（类似moviesdata）；
/*形式*/
常量formData={
片名：电影，片名，
发布日期：movies.release\u date，
类别：movies.categories.map（c=>c.name），
描述：电影。描述，
海报：movies.poster，
背景：电影背景，
参与者：actorsData，
相似的电影：相似的电影数据，
id:movies.id
};
const LOCAL_URL=”http://localhost:3000/movies";
const handleSubmit=（事件）=>{
event.preventDefault（）；
console.log（formData）；
axios.post（本地URL、表单数据、，
{
标题：{
“内容类型”：“应用程序/json”，
} 
})
.then（response=>{console.log（response）}）
.catch（（错误）=>console.log（错误））；
历史推送（“/”）；
//设置重定向到（'/movies'）；
};
返回(
{/*电影*/}
{/*电影标题*/}
标题
{/*电影发行日期*/}
发布日期
{/*电影描述*/}
提要
{/*电影类别*/}
类别


名称


{/*演员*/}
演员

{actors.map（a=>(

{/*演员姓名*/}
名称
{/*演员角色*/}
人物

))}

{/*类似电影*/}
类似电影