如何使用react redux在帖子中插入数据?

IT技术 javascript html reactjs redux
2021-05-16 01:30:58

我正在学习 react-redux,所以我正在为使用 JSON 占位符 API 的用户创建一个 CRUD 应用程序,现在我能够显示数据、删除和编辑,但是我在添加数据时遇到了问题。

这是沙箱中的实时演示redux live demo

现在,当我单击添加用户按钮时,出现以下错误。

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

我需要做什么来解决问题?,任何帮助或建议将不胜感激,现场演示可以在沙箱redux 演示中找到

2个回答

查看您的代码 - 看起来您的应用程序正在崩溃,因为您没有将任何用户有效负载对象传递给addUser调度调用(在User.js第 64 行)。

这是解决此问题的可能方法:

传递一个新用户有效负载对象,其 id 比列表中的前一个用户高 1),然后editUser为该新 id调度一个

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

这是一个非常简化的解决方案(例如 - 更好的方法是为每个用户提供一个唯一的 id 并索引客户端上的列表而不是基于服务器 id) - 但它应该让你知道如何采取这个向前。

首先,为了临时处理编译错误,在 user?.editing 和其他使用 user.id 或其他参数的地方放置问号。另一件事,我可以看到您正在使用 id 进行编辑和删除,因此您还应该在 userForm 中设置 id 属性