Reactjs Axios对嵌套对象的Post请求

我是新来的。我正在制作一页板球统计数据，当我试图使用React向数据库发布数据时，遇到了一个错误。我使用Axios发布了一个请求，只有一半的数据被发送到数据库。其余的都陷入了验证阶段。这是代码

import React,{useState,useEffect} from 'react';
import qs from 'qs';
import axios from 'axios';

function CreatePlayer(props){

  const [newPlayer,setNewPlayer] = useState({
    name:"",
    role :"",
    runs : 0,
    wickets : 0
  });

  function handleChange(event){
    const {name,value}=event.target;
    setNewPlayer((prevPlayer) =>{
      return{
        ...prevPlayer,
        [name]:value
      };
    });
  };

  function submitPlayer(event){
    console.log(newPlayer);

    const data = qs.stringify({
      playerName : newPlayer.name,
      role : newPlayer.role,
      stats:{
        runs : newPlayer.runs,
        wickets : newPlayer.wickets
      }
    });

    const headers ={
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    };

    axios.post("http://localhost:5000/players/add",data,headers)
    .then( res => console.log(res.data))
    .catch( err => console.log(err));

    event.preventDefault();
  };

  return(
    <div className="container text-center">
    <h1 className="heading text-center">New Player</h1>
    <form>
    <div className="form-group"><input onChange={handleChange} name="name"  value={newPlayer.name} placeholder ="Player Name"/></div>
    <div className="form-group"><input onChange={handleChange} name="role"  value={newPlayer.role} placeholder="Role"/></div>
    <div className="form-group"><input onChange={handleChange} name="runs"  value={newPlayer.runs} placeholder="Runs"/></div>
    <div className="form-group"><input onChange={handleChange} name="wickets"  value={newPlayer.wickets} placeholder="Wickets"/></div>
    <button onClick={submitPlayer}>Submit</button>
    </form>
    </div>
  );
}

export default CreatePlayer;

当我试图发布以下内容时出现此错误：

"Player validation failed: stats.runs: Cast to Number failed for value "NaN" at path "stats.runs"
"Player validation failed: stats.wickets: Cast to Number failed for value "NaN" at path "stats.wickets"

---

这将

stats.runs

和

stats.wickets

视为字符串，MongoDB希望它是数字。 在发送到Mongo之前将其转换为数字

runs = parseInt(stats.runs, 10);
wickets = parseInt(stats.wickets, 10);

---

这将把你的runs&wickets字符串转换成数字，如果它存储了任何数值。

谢谢你的建议。问题已解决发送数据时发生错误。该值不会发送到数据库。因此，将发送null值并导致该错误。

runs = parseInt(stats.runs, 10);
wickets = parseInt(stats.wickets, 10);