reactjs - React：我想提交一个表单并想通过钩子（useSelector和useDispatch）将数据保存在redux store中

问题描述

React：我想提交一个表单，并希望通过钩子（useSelector 和 useDispatch）将数据保存在 redux 存储中，如果需要其他内容，请告诉我我会上传我在这个问题上需要这个帮助，我将不胜感激

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import {
  Button,
  Form,
  FormGroup,
  Label,
  Input,
  Container,
  Col
} from "reactstrap";
import "./style.scss";

import { addUserAction } from "../../store/reducers/registerReducer.js";

const Register = () => {
  const [user, setUser] = useState("");
  const usedispatch = useDispatch();
  const addUser = user => usedispatch(addUserAction(user));

  const submitHandler = e => {
    e.preventDefault();
    console.log(user);
    if (user.trim() === "") return;
    addUser(user);
  };
  const onChange = e => {
    //console.log(e.target.value);
    setUser(e.target.value);
  };

  return (
    <Container className="register">
      <h2>Register</h2>
      <Form onSubmit={submitHandler} className="form">
        <Col>
          <FormGroup>
            <Label>Full Name</Label>
            <Input
              type="text"
              name="fullname"
              id="fullname"
              value={user.fullname}
              placeholder="Full Name"
              onChange={onChange}
            />
          </FormGroup>
        </Col>

        <Col>
          <FormGroup>
            <Label>Email</Label>
            <Input
              type="email"
              name="email"
              value={user.email}
              id="email"
              placeholder="myemail@email.com"
              onChange={onChange}
            />
          </FormGroup>
        </Col>
        <Col>
          <FormGroup>
            <Label for="examplePassword">Password</Label>
            <Input
              type="password"
              name="password"
              value={user.password}
              id="password"
              placeholder="********"
              onChange={onChange}
            />
          </FormGroup>
        </Col>
        <Button>Submit</Button>
      </Form>
    </Container>
  );
};

export default Register;
//////////////////////////////////////////////////////////////// reducer
const initialState = {
  fullname: "",
  email: "",
  password: ""
};

function userRegister(state = initialState, action) {
  switch (action.type) {
    case "ADD_USER":
      return {
        ...state
      };
    default:
      return state;
  }
}

export default userRegister;

// Actions
export const addUserAction = user => ({
  type: "ADD_USER",
  payload: user
});

标签： reactjsreduxreact-hooksstore

您的user状态是一个字符串，并作为字符串更新。但是您正在将其作为对象访问user.fullname。

其次，您使用空的用户对象而不是表单值提交您的 redux 操作：

addUser({
  fullname: "",
  email: "",
  password: ""
});

要么更改您的表单以useState对每个值使用不同的 '，要么更好地将当前user状态更改为对象。然后改为发送该对象：

const [user, setUser] = useState({
  fullname: "",
  email: "",
  password: ""
});

const onChange = e => {
  setUser({...user, [e.target.name]: e.target.value});
};

addUser(user);

最后，您没有在减速器中使用有效负载，只是返回状态。通过像这样返回它来保存用户：

case "ADD_USER":
  return action.payload;

reactjs - React：我想提交一个表单并想通过钩子（useSelector和useDispatch）将数据保存在redux store中

问题描述

解决方案

推荐阅读