问题描述
我正在学习 react-redux,所以我正在为使用 JSON 占位符 API 的用户创建一个 CRUD 应用程序,现在我能够显示数据、删除和编辑,但是我在添加数据时遇到了问题.
I am learning react-redux, so I am creating a CRUD app for users using JSON placeholder API, now I am able to display data, delete and edit, but I have a problem with adding data.
这是沙箱中的现场演示:redux 现场演示
Here is a live demo in the sandbox : redux live demo
现在,当我单击添加用户按钮时,出现以下错误.
Now when I click add user button I get the following error.
Cannot read property 'editing' of undefined.
这是我添加用户的表单组件.
Here is my form component to add a user.
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 演示
What do I need to do to solve the problem?, any help or suggestions will be appreciated, the live demo can be found here in the sandboxredux demo
推荐答案
查看您的代码 - 由于您没有将任何用户有效负载对象传递给 addUser
调度,因此您的应用似乎正在崩溃调用(在 User.js
第 64 行).
Looking at your code - it seems like your app is breaking since you are not passing any user-payload object to theaddUser
dispatch call(on User.js
line 64).
这是一种可能的方法解决这个问题:
Here's a possible way to solve this:
传递一个新用户有效负载对象,其 id 比列表中的前一个用户高 1),然后为该新 id 调度一个 editUser
.
Passing a new-user payload object with an id 1 higher than the previous user on the list) and then dispatch an editUser
for that new id.
const addNewUser = () => {
const usersList = userData.users;
const newUserId = usersList[usersList.length - 1].id + 1;
addUser({
id: newUserId
});
editUser(newUserId);
};
这是一个非常简单的解决方案(例如 - 更好的方法是为每个用户提供一个唯一的 id 并索引客户端上的列表而不是基于服务器 id) - 但它应该让你知道如何推动这一进程.
This is a very simplified solution (for example - a better approach would be to give a unique id to each user and index the list on the client not based on the server ids) - but it should give you an idea of how to take this forward.
这篇关于如何使用react redux在帖子中插入数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!