时间戳

首页 > 解决方案 > 如何使用 react redux 更新用户信息？

javascript - 如何使用 react redux 更新用户信息？

问题描述

我正在学习 react-redux，我正在使用 JSON 占位符创建一个简单的 CRUD 应用程序，现在我可以使用 post 和 delete 方法显示数据和删除数据，但我不知道如何在 redux 中使用 put 方法更新数据，我需要帮助。

**

这是沙盒中的现场演示：redux live demo

**

这是我到目前为止所拥有的，用户组件（只是代码的一部分）

return(
      <div>
            <table id="users">
                <thead>
                    <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Action</th>
                    </tr>
                </thead>
                {userData &&
                    userData.users &&
                    userData.users.map(user => 
                <tbody>
                  {user.editing ? <UserForm user={user} key={user.id} />:
                    <tr key={user.id}>

                        <td>{user.id}</td>
                        <td>{user.name}</td>
                        <td>
                        <button key={user.id} type="button" className="btn btn-danger btn-link" onClick={() => deleteUser(user.id)}>
                            <i className="material-icons">delete</i>
                        </button>
                        <button key={user.id} type="button" className="btn btn-success btn-link" onClick={() =>editUser(user.id)}>
                            <i className="material-icons">edit</i>
                        </button>
                        </td>
                    </tr>
                  }
                </tbody>
                )}

            </table>
      </div>
  )

这是userfom组件

import React from 'react'
import { useForm } from "react-hook-form";

function UserForm() {
    const { edit, handleSubmit} = useForm();
    return (
        <div>
            <form onSubmit={handleSubmit}>
                 <input name="name" defaultValue="test" ref={edit} />
                 <input type="submit" />
            </form>
        </div>
    )
}

export default UserForm

这是减速器中的编辑用户

 case ActionTypes.EDIT_USER:
                return{
                    ...state,
                    users:state.users.map((user)=>user.id === action.payload ? {
                        ...user,editing:!user.editing
                    }:user)

                }

现在，当我单击编辑并提交数据时，它会刷新页面并且用户信息中没有任何更新（在此处实时查看

我的代码有什么问题？

标签： javascripthtmlreactjsredux

解决方案

好吧，我对 react-hook-form 了解不多，但我会尽力帮助您，首先您需要将一个函数传递给您的“handleSubmit”，否则我认为您不会阻止默认行为提交时，我的意思是 handleSubmit 函数不执行“event.preventDefault()”，因此您可以将以下内容放在 useForm 挂钩下方：

const onSubmit = data => {
   console.log(data);
}

然后在您的 jsx 中，您将拥有

<form onSubmit={handleSubmit(onSubmit)}>

我不确定，因为正如我告诉你的那样，我不使用 react-hook-form，但我认为我看到的另一个错误是你正试图从 useForm 钩子中获取“编辑”属性，那不会不起作用，您没有在那里声明变量，您正在尝试从 useForm 挂钩访问属性，因此为了跟踪输入的更改，您应该使用“注册”，我的意思是您应该有以下代码：

const { register, handleSubmit } = useForm();

您应该使用以下内容更新您的 jsx：

<input name="name" defaultValue="test" ref={register} />

现在，每次提交时，您的表单都会包含我们在 onSubmit 函数中添加的 console.log 中的更改。您已经将 redux 与您的 Users 组件连接起来，我的意思是您正在使用 mapDispatchToProps ，因此在您的 Users 组件中，您将能够访问 edit 道具以调度 editUser 操作。因此，为了继续使用 redux，您可以通过 this.props.editUser 将该道具传递给您的 UserForm 组件并继续。另一种选择是将 UserForm 组件与 redux 连接并访问 editUser 属性。

推荐阅读