checkPropTypes. js: 20 Предупреждение: сбойный тип пропеллера: опора `form` помечена как обязательная в` LoginPage`, но ее значение равно `undefined` - PullRequest
Новая
       10

checkPropTypes. js: 20 Предупреждение: сбойный тип пропеллера: опора `form` помечена как обязательная в` LoginPage`, но ее значение равно `undefined`

0 голосов
/ 29 апреля 2020

Я застрял на той же ошибке в течение 2 дней, и я не могу найти решение. Я надеялся, что кто-нибудь поможет мне с этим. Кажется, что ошибка в форме: PropTypes.array.isRequired, в PropTypes, но я не понимаю, почему. Я имею в виду, я инициализировал состояние пустого массива в formReducer. Я был бы признателен за любую помощь, потому что я только начал изучать React, а React-Redux для меня немного ошеломляет, но я действительно хочу научиться этому.

loginPage 

import React from "react";
import { connect } from "react-redux";
import * as formAction from "../../redux/actions/formAction";
import PropTypes from "prop-types";

class LoginPage extends React.Component {
  constructor() {
    super();

    this.state = {
      visitor: {
        username: "",
        password: "",
      },
    };
    //this.updateVisitor = this.updateVisitor.bind(this);
  }

  updateVisitor(attr, event) {
    console.log(attr + " == " + event.target.value);

    const updatedVisitor = { ...this.state.visitor }; //ili je object assign vrati se na 27.47
    updatedVisitor[attr] = event.target.value;

    this.setState({
      visitor: updatedVisitor,
    });
  }

  register(event) {
    event.preventDefault();
    this.props.dispatch(formAction.insertID(this.state.visitor));
    console.log("REGISTER:" + JSON.stringify(this.state.visitor));
  }

  login(event) {
    event.preventDefault();
    console.log("LOGIN:" + JSON.stringify(this.state.visitor));
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-6">
            <h1>Register</h1>
            <form onSubmit={this.register.bind(this)}>
              <input
                onChange={this.updateVisitor.bind(this, "username")}
                className="form-control"
                type="text"
                placeholder="Username"
              ></input>
              <br />

              <input
                onChange={this.updateVisitor.bind(this, "password")}
                className="form-control"
                type="password"
                placeholder="Password"
              ></input>

              <br />
              <button type="submit" value="save">
                Register
              </button>
            </form>

            <hr />

            <h1>Login</h1>
            <form onSubmit={this.login.bind(this)}>
              <input
                onChange={this.updateVisitor.bind(this, "username")}
                className="form-control"
                type="text"
                placeholder="Username"
              ></input>

              <br />
              <input
                onChange={this.updateVisitor.bind(this, "password")}
                className="form-control"
                type="password"
                placeholder="Password"
              ></input>
              <br />

              <button type="submit" value="save">
                Log in
              </button>
              {this.props.form.map((Zasvaki) => (
                <div key={Zasvaki.username}>{Zasvaki.username}</div>
              ))}
            </form>
          </div>
        </div>
      </div>
    );
  }
}

LoginPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
  form: PropTypes.array.isRequired,
};

function mapStateToProps(state) {
  return {
    form: state.form,
  };
}

export default connect(mapStateToProps)(LoginPage);

configureStore 

import rootReducer from "./reducers/formReducer";
import reduxImmutableStateInvariant from "redux-immutable-state-invariant";

export default function configureStore(initialState) {
  const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; //Add support for redux devtools
  return createStore(
    rootReducer,
    initialState,
    composeEnhancers(applyMiddleware(reduxImmutableStateInvariant()))
  );
}

formAction 

export function insertID(ID) {
  return { type: "INSERT_ID", ID: ID };
}

formReducer 

  switch (action.type) {
    case "INSERT_ID":
      return [...state, { ...action.ID }]; //Vraca klonirani array sa svim prijasnjim stanima plus sa novim stanjem dodanim
    default:
      return state;
  }
}

index. js / / Комбинированный редуктор 

import form from "./formReducer";

const rootReducer = combineReducers({
  form: form,
});

export default rootReducer;
...