Question

我试图将我的函数从Action声明为PropType，但它始终显示“ ... value is undefined”。有人可以告诉我我的错误在哪里吗？

我尝试使用“ npx”以及所有相关解决方案重新打包我的react文件夹“ client”。

action/auth.js

import {
  LOGIN_SUCCESS,
  LOGIN_ERROR,
  USER_LOADING,
  USER_LOADED,
  REGISTER_ERROR,
  REGISTER_SUCCESS
} from "./types";
import axios from "axios";

export const getConfig = getState => {
  let config = {
    headers: { "Content-Type": "application/json" }
  };
  const token = getState().auth.token;
  if (token) {
    config.headers["x-auth-token"] = `Bearer ${token}`;
  }

  return config;
};

export const registerUser = userObj => (dispatch, getState) => {
  axios
    .post("/auth/register", JSON.stringify(userObj), getConfig(getState))
    .then(result => {
      console.log(result);
      dispatch({
        type: LOGIN_SUCCESS,
        payload: result.data
      });
    })
    .catch(error => {
      console.log(error);
      dispatch({
        type: LOGIN_ERROR
      });
    });
};

component/main/RegisterForm
import React, { Component } from "react";

import { Link } from "react-router-dom";
import { Alert } from "reactstrap";
import { registerUser } from "../../actions/auth";
import { connect } from "react-redux";
import PropTypes from "prop-types";

export class RegisterForm extends Component {
  constructor(props) {
    super(props);
    document.title = "OnlineChat - Register";
  }

  state = {
    firstname: "",
    lastname: "",
    email: "",
    password: "",
    password1: "",
    error: null,
    visible: false
  };

  static propTypes = {
    registerUser: PropTypes.func.isRequired
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  onDismiss = e => {
    this.setState({ visible: false, error: null });
  };

  onSubmit = e => {
    e.preventDefault();
    const { firstname, lastname, email, password, password1 } = this.state;
    const userObj = this.state;
    console.log(firstname, lastname, email, password, password1);
    if (!firstname || !lastname || !email || !password || !password1) {
      return this.setState({ error: "Please fill all fields.", visible: true });
    }
    if (password !== password1) {
      return this.setState({ error: "Password must match.", visible: true });
    }
    this.props.registerUser(userObj);

    this.setState({
      firstname: "",
      lastname: "",
      email: "",
      password: "",
      password1: ""
    });
  };
  render() {
    const {
      firstname,
      lastname,
      email,
      password,
      password1,
      error,
      visible
    } = this.state;
    return (
      <div className="d-flex align-items-center" style={{ height: "100vh" }}>
        <div className="container">
          <div className="row">
            <div className="col-12 col-sm-12 col-md-6 col-lg-6 offset-md-3">
              <Alert color="danger" isOpen={visible} toggle={this.onDismiss}>
                <strong>Alert! </strong>
                {error}
              </Alert>
              <div className="card">
                <div className="card-body">
                  <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                      <label htmlFor="">First Name</label>
                      <input
                        type="text"
                        autoComplete="off"
                        className="form-control"
                        onChange={this.onChange}
                        value={firstname}
                        name="firstname"
                      />
                    </div>
                    <div className="form-group">
                      <label htmlFor="">Last Name</label>
                      <input
                        type="text"
                        autoComplete="off"
                        className="form-control"
                        onChange={this.onChange}
                        value={lastname}
                        name="lastname"
                      />
                    </div>
                    <div className="form-group">
                      <label htmlFor="">Email</label>
                      <input
                        type="email"
                        autoComplete="off"
                        className="form-control"
                        onChange={this.onChange}
                        value={email}
                        name="email"
                      />
                    </div>
                    <div className="form-group">
                      <label htmlFor="">Password</label>
                      <input
                        type="password"
                        autoComplete="off"
                        className="form-control"
                        onChange={this.onChange}
                        value={password}
                        name="password"
                      />
                    </div>
                    <div className="form-group">
                      <label htmlFor="">Re-type Password</label>
                      <input
                        type="password"
                        autoComplete="off"
                        className="form-control"
                        onChange={this.onChange}
                        value={password1}
                        name="password1"
                      />
                    </div>
                    <button
                      className="btn btn-block btn-outline-success"
                      type="submit"
                    >
                      Register
                    </button>
                  </form>
                  <div className="d-block justify-content-left pt-2">
                    <Link to="/" className="cLink">
                      Have an account ?
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(
  mapStateToProps,
  { registerUser }
)(RegisterForm);

reducer/authReducer

import {
  LOGIN_ERROR,
  LOGIN_SUCCESS,
  REGISTER_ERROR,
  REGISTER_SUCCESS,
  USER_LOADING
} from "../actions/types";

const initialState = {
  token: localStorage.getItem("token"),
  isAuthenticated: null,
  isLoading: false,
  user: null
};

export default (state = initialState, action) => {
  switch (action.type) {
    case USER_LOADING:
      return {
        ...state,
        isLoading: true
      };
    case LOGIN_SUCCESS:
    case REGISTER_SUCCESS:
      localStorage.setItem("token", action.payload.token);
      return {
        ...state,
        ...action.payload,
        isAuthenticated: true,
        isLoading: false
      };
    case LOGIN_ERROR:
    case REGISTER_ERROR:
      return {
        ...state,
        token: null,
        isAuthenticated: null,
        isLoading: false,
        user: null
      };
    default:
      return state;
  }
};

以下是错误消息，始终在我的控制台中提示。

Error Message

Answer 1

从类中删除导出，将其设置为class RegisterForm extends Component {而不是export class RegisterForm extends Component {，因为您要在底部说出口默认连接的模块进行导出

PropType声明的函数，值未定义

1 个答案: