Javascript 如何使用react redux在post中插入数据？

我正在学习react-redux，因此我正在使用JSON占位符API为用户创建CRUD应用程序，现在我可以显示数据、删除和编辑，但在添加数据时遇到了问题

以下是沙盒中的实时演示：

现在，当我单击添加用户按钮时，我得到以下错误

Cannot read property 'editing' of undefined.

这是我要添加用户的表单组件

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

function AddUserForm({ user }) {
    const dispatch = useDispatch();
    const [name, setName ] = useState(user.name);

   const handleSubmit = () =>{
        console.log(name)
        dispatch(addNewUser( {
            ...user, name
        }));
   }

  const handleCancel = () => {
      console.log(user.id);
      dispatch(addUser(user.id))
  }
  return (
    <tr>
      <td>{user.id}</td>
      <td>
        <input
          defaultValue={user.name}
          onChange={e => setName(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”导入{addUser，addNewUser}；
函数AddUserForm（{user}）{
const dispatch=usedpatch（）；
const[name，setName]=useState（user.name）；
常量handleSubmit=（）=>{
console.log（名称）
分派（addNewUser（{
…用户，名称
}));
}
常量handleCancel=（）=>{
console.log（user.id）；
分派（addUser（user.id））
}
返回(
{user.id}
setName（e.target.value）}
/>
取消
拯救
);
}
导出默认AddUserForm

---

我需要做些什么来解决这个问题？如果您有任何帮助或建议，我们将不胜感激。您可以在沙盒中找到实时演示，查看您的代码-您的应用程序似乎正在崩溃，因为您没有将任何用户负载对象传递给

addUser

调度调用（在

user.js

第64行）

解决此问题的一种可能方法：

传递一个id比列表上的前一个用户高1的新用户有效负载对象），然后为该新id分派一个

editUser

const addNewUser = () => {
    const usersList = userData.users;
    const newUserId = usersList[usersList.length - 1].id + 1;
    addUser({
      id: newUserId
    });
    editUser(newUserId);
  };

---

这是一个非常简单的解决方案（例如，更好的方法是为每个用户提供一个唯一的id，并在客户机上索引列表，而不是基于服务器id），但它应该让您了解如何推进这一点

首先，要临时处理编译错误，请在user？编辑和其他使用user.id或其他参数的地方打上问号。

---

另外，我可以看到您正在使用id进行编辑和删除，所以您还应该在您的userForm中设置id属性

hej您在sandbox上测试过这个吗？我测试过。似乎您想要传递的是一个对象，它将作为新用户的初始属性（id、名称占位符等）的有效负载，但即使将空对象（

addUser（{}）

）传递给

addUser

，也会使代码停止中断。我是redux的新手，这就是我需要帮助的原因，如果你知道解决方案，你能克隆repo并显示解决方案吗？我已经用一个可能的简单解决方案更新了我的答案。我已经编辑了我的答案和解决方案-也在

addUser

得到你想要的（我想）后立即发送

editUser

。这就是为什么我需要帮助才能更好地理解这一点，如果你知道naswer，你可以克隆回购协议，并告诉我如何以适当的方式完成，谢谢