Javascript 使用React和redux的Post方法

我有一个用于CRUD操作的简单应用程序，现在我可以删除、编辑和显示数据，但我想向使用react和redux从API（JSON服务器伪API）获取的用户列表中添加新项目

现在，当我单击添加用户并保存数据时，只发送id，而不发送其他数据。

这是一个现场演示：

这是我的表单，AddUserForm.js

import React, { useState } from 'react'
import {useDispatch} from 'react-redux'
import { addNewUser  } from '../redux/acitons/users/Users';

function AddUserForm({users}) {
    const dispatch = useDispatch();
    const [newUserName, setNewUserName] = useState('');

   const handleSubmit = (e) =>{
    e.preventDefault();

    const usersList = users;
    const newUserId = usersList[usersList.length - 1].id + 1;

    console.log("your name", newUserName);
    console.log("your id", newUserId)

    dispatch(addNewUser({
      ...users,
      id: newUserId,
      name: newUserName,
    }));

   }

  const handleCancel = () => {};
  return (
    <tr>
      <td>{newUserName.id}</td>
      <td>
        <input
          value={newUserName}
          name="name"
          onChange={e => setNewUserName(e.target.value)}
        />
      </td>
      <td>
        <button type="button" className="btn outline" onClick={handleCancel}>
          <i className="material-icons">Cancel</i>
        </button>
        <button
          type="button"
          className="btn btn-success btn-link"
          onClick={handleSubmit}
        >
          <i className="material-icons">save</i>
        </button>
      </td>
    </tr>
  );
}

export default AddUserForm

import React，{useState}来自“React”
从“react redux”导入{useDispatch}
从“../redux/acitons/users/users”导入{addNewUser}；
函数AddUserForm（{users}）{
const dispatch=usedpatch（）；
const[newUserName，setNewUserName]=useState（“”）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
const usersList=用户；
const newUserId=usersList[usersList.length-1].id+1；
log（“您的名字”，newUserName）；
log（“您的id”，newUserId）
调度（addNewUser）({
…用户，
id:newUserId，
姓名：newUserName，
}));
}
常量handleCancel=（）=>{}；
返回(
{newUserName.id}
setNewUserName（e.target.value）}
/>
取消
拯救
);
}
导出默认AddUserForm

我用点击按钮在父组件中这样调用

{adding && <>
            <AddUserForm addNewUser={addNewUser} users={userData.users} />
   </>}

{添加&&
}

这是父组件中的一个按钮

<button
          type="button"
          className="btn btn-success btn-link btn-add"
          onClick={() => setAdding(true)}
        >
    <i className="material-icons">Add user</i>
</button>

setAdding（true）}
>
添加用户

---

我的代码有什么问题？任何帮助或建议都将不胜感激。

在调试工具屏幕截图中，您向我们显示的是响应主体，而不是请求主体

用户

是一个数组，为什么会这样

dispatch(addNewUser({
  ...users,
  id: newUserId,
  name: newUserName,
}));

你知道吗

dispatch(addNewUser({
  id: newUserId,
  name: newUserName,
}));

问题的根本原因是

src/redux/acitons/users/users

export const addNewUser = data => {

  console.log("adding mother a new user", data);

  return dispatch => {
    axios.post("http://localhost:3000/users")

把最后一行换一下就行了

    axios.post("http://localhost:3000/users", data)

我可以在

控制台中看到
数据
。日志

不在帖子中

这将导致空

用户列表出现错误

const newUserId = usersList[usersList.length - 1].id + 1;

希望这有帮助。
您检查过这个吗？我改变了，但仍然是一样的，你可以克隆repo并在你身边测试它应用程序打开时显示“请求失败，状态代码404”可能后端丢失了？@我克隆的repo
数据
中的负责人在POST请求中仍然丢失了Daniel抱歉，我没有告诉你，您需要首先运行
json服务器——监视users.json
，然后在另一个终端上运行
warn start
，您应该会看到数据，我正在使用json服务器api@TheDeadMan我只是在POST请求中添加了
数据
，效果很好。。。请检查我编辑的答案