checkPropTypes.js:20警告:失败的道具类型:道具"form"在"Logi

Question

我已经被同一个bug卡住两天了，找不到修复方法。我希望有人能帮我解决这个问题。错误似乎出现在PropTypes中的表单：PropTypes.array.isRequired上，但我不知道为什么。我的意思是，我在formReducer中将状态初始化为空数组。我很感激任何帮助，因为我刚刚开始学习React，React Redux对我来说有点难以承受，但我真的很想学习。

登录页面

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;

Answer 1

因此，在您的情况下，reducer没有名称，因此当您将值分配给表单时，只需分配整个状态：

function mapStateToProps(state) {
console.log("there's no 'form' on the state: ", state.form); // undefined
// looks like you need to assign whole state
return { form: state };
}

现在您不需要在中执行this.props.form &&部分

this.props.form && this.props.form.map((Zasvaki) => (

^^这将修复您的错误，但我真正建议您做的是将redux state作为一个对象，并在您的情况下将您想要的值实际分配给属性form。所以在减速器中，你会有这样的东西：

export default function formReducer(state = {}, action) {
switch (action.type) {
case "INSERT_ID":
return {
...state,
form: {
...action.ID
}
}
default:
return {
...state
}
}
}

然后在loginPage.js中，您需要进行以下更改：

Auth.propTypes = {
dispatch: PropTypes.func.isRequired,
// most likely you will not need an array of user names and passwords
// change back to the array if otherwise
form: PropTypes.shape({
username: PropTypes.string,
password: PropTypes.string,
}),
};
function mapStateToProps(state) {
return { form: state.form };
}
export default connect(mapStateToProps)(Auth);

在html中只显示您想要查看的form的属性：

{this.props.form && (
<div key={this.props.form.username}>{this.props.form.password}</div>
)}