反应：我想提交一个表单，并想通过钩子（useSelector和useDispatch）将数据保存在redux存储中]]

Question

反应：我想提交一个表单，并想通过钩子（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="[email protected]"
              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
});

反应：我想提交一个表单，并想通过钩子（useSelector和useDispatch）将数据保存在redux存储中让我知道是否还有其他需要上传的内容我需要这个问题的帮助我会很感激

反应：我想提交一个表单，并想通过钩子（useSelector和useDispatch）将数据保存在redux存储中。让我知道是否还有其他需要上传的东西，我需要此问题上的帮助... ...>] >

您的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;

<Input
          type="email"
          name="email"
          value={user.email}
          id="email"
          placeholder="[email protected]"
          onChange={onChange}
        />

我应该在这里加值

Answer 1

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

Answer 2

<Input
          type="email"
          name="email"
          value={user.email}
          id="email"
          placeholder="[email protected]"
          onChange={onChange}
        />

我应该在这里加值