嵌套对象的 Axios 发布请求

Question

我是 React 新手。当我尝试使用 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;

和猫鼬模型：

  const playersSchema = new mongoose.Schema({
  playerName : String,
  role : String,
  stats : {
    runs : Number,
    wickets : Number
  }
},
{
  timestamps: true
});

我在尝试发帖时收到此错误：

"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"

Answer 1

这将stats.runs & stats.wickets 视为字符串，而 MongoDB 期望它是数字。 在发送到 Mongo 之前将其转换为 Number。

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

如果它存储任何数字值，这会将您的跑步和检票口字符串转换为数字。