Reactjs Usestate钩子没有将数据属性发送到数据库答案

【问题标题】：Reactjs Usestate hook not sending data properlty to databaseReactjs Usestate钩子没有将数据属性发送到数据库
【发布时间】：2021-10-12 02:33:31
【问题描述】：

我知道这是一个非常简单的问题，但我是 MERN 技术的新手。我正在使用 React 前端将我的数据发送到 json-server npm 模块，即使数据顺利存储到后端，所有代码也可以正常工作。但问题是前端数据向后端服务器发送了我不想要的额外字段。 you can see image 有 3 个对象，第一个是我手动存储的两个对象，第三个是我使用 React 前端应用程序存储的。第三个 json-object 存储了我不想要的 extra fields are highlited here。我正在上传我的工作代码，请指导我。

 //RegisterUser react Component :
import React from 'react'
import { useState } from 'react';
import loginImage from '../images/login2.jpeg';
import { NavLink } from 'react-router-dom';
import { addUser} from '../Service/api';

const initialValues = {
name:"",
username:"",
email:"",
phone:"",
 }

const RegisterUser = () => {

const [user , setUser]= useState([initialValues]);
const { name,username, email, phone,} = user;



const style = {
    color: 'black',
    textAlign:'center'
  };

  const onValueChange= (e)=>{
      console.log(e.target.Object);
      setUser({...user, [e.target.name]:e.target.value})
      console.log(user)
  }

  const addUserDetails= async()=>{
   
    await addUser(user);
  }

 return (
    <div>
         <div>
    
    <div className="container login-container">
    <div className="row login-form-1">
    <div className="col-md-6 ">
    <h3 style={style}>Registration</h3>
          <form>
            <div className="form-group">
               <input type="text" className="form-control" onChange={(e)=>                            onValueChange(e)} name="name" value={name} placeholder="Your Name *"  />
            </div>
            
            <div className="form-group">
              <input type="text" className="form-control" onChange={(e)=>    onValueChange(e)} name="username" value={username} placeholder="username *"  />
            </div>
            <div className="form-group">
              <input type="text" className="form-control"  onChange={(e)=> onValueChange(e)} name="email"  value={email} placeholder="Your Email *"  />
            </div>
            <div className="form-group">
              <input type="text" className="form-control" onChange={(e)=> onValueChange(e)} name="phone" value={phone}  placeholder="Mobile Number *"  />
            </div>
            <div className="form-group">
              <input type="submit" className="btnSubmit" onClick={()=> addUserDetails()} defaultValue="Login" />
            </div>
          </form>
          </div>
          <div className="col">
          
              <img className="loginpic" src={loginImage} alt="login Image"/>
              <div className="col">
          <NavLink  to="/login" className="signupIs" >I have already     account</NavLink>
    </div>
          </div>
    </div>
    </div>
          </div>
    </div>

    
 


    
)
   }

    export default RegisterUser

API 文件

    import axios from 'axios';

    const url = 'http://127.0.0.1:3003/users';

    export const getUsers = async ()=>{
   return await axios.get(url);
    }

  export const addUser = async(user)=>{
   return await axios.post(url,user); 
    }

我再次通知代码在执行时运行没有错误，但问题是从 React 前端获取额外的数据字段

【问题讨论】：

看起来您唯一的问题是您最初将状态设置为一个数组，而它不应该是一个数组：const [user , setUser]= useState(initialValues);。请注意，我删除了括号[ ]

标签： javascript reactjs async-await react-hooks use-state

【解决方案1】：

当您第一次初始化您的“用户”时，您将其创建为一个数组：

const [user , setUser]= useState([initialValues]);
                              // ^---- here ---^

然后你将数组解释为一个对象并向它添加属性：

setUser({...user, [e.target.name]:e.target.value})

这样做时，初始“用户”将是一个名为"0" 的属性，因为它是数组的第一个元素。所以那些“额外属性”只是初始状态。

听起来您的意图根本不是使用数组：

const [user, setUser] = useState(initialValues);

【讨论】：