[英]ReduxForm - React Error - Objects are not valid as a React child
我已經閱讀了與我的問題相關的所有問題,但有點不同。
編譯我的代碼后收到此錯誤消息:
Error: Objects are not valid as a React child
(found: object with keys {$$typeof, render, displayName,
isLoading, fields, people, saveStatus, onSubmit, defaultProps}).
If you meant to render a collection of children, use an array instead.
這是我認為有問題的組件。 我試圖刪除列表{name, ..., course}並替換為element但我收到了同樣的錯誤。 先感謝您。
import { savePeople } from '../ReduxConfiguration/actions';
class Form extends Component {
static propTypes = {
people: PropTypes.array.isRequired,
isLoading: PropTypes.bool.isRequired,
saveStatus: PropTypes.string.isRequired,
fields: PropTypes.object,
onSubmit: PropTypes.func.isRequired
};
state = {
fields: this.props.fields || {
name: '',
email: '',
course: null,
department: null
},
fieldErrors: {}
};
validate() {
const person = this.state.fields;
const fieldErrors = this.state.fieldErrors;
const errMessages = Object.keys(fieldErrors.filter(k => fieldErrors[k]));
if (!person.name) return true;
if (!person.email) return true;
if (!person.course) return true;
if (!person.department) return true;
if (errMessages.length) return true;
return false;
}
componentWillReceiveProps(update) {
console.log('this.props.fields', this.props.fields, update);
this.setState({ fields: update.fields });
}
onFormSubmit = evt => {
const person = this.state.fields;
evt.preventDefault();
if (this.validate()) return;
this.props.onSubmit([...this.props.people, person]);
};
render() {
if (this.props.isLoading) {
return <img alt="loading" src="/img/loading.gif" />;
}
const dirty = Object.keys(this.state.fields).length;
let status = this.props.saveStatus;
if (status === 'SUCCESS' && dirty) status = 'READY';
return (
<div>
<h1>Amazing Signup Form</h1>
<form onSubmit={this.onFormSubmit}>
<Field
placeholder="Name"
name="name"
value={this.state.fields.name}
onChange={this.onInputChange}
validate={val => (val ? false : 'Name Required')}
/>
<br />
<Field
placeholder="Email"
name="email"
value={this.state.fields.email}
onChange={this.onInputChange}
validate={val => (isEmail(val) ? false : 'Invalid Email')}
/>
<br />
{/* <CourseSelect
department={this.state.fields.department}
course={this.state.fields.course}
onChange={this.onInputChange}
/> */}
<br />
{
{
SAVING: <input value="Saving ..." type="submit" disabled />,
SUCCESS: <input value="Saved!" type="submit" disabled />,
ERROR: (
<input
value="Save Failed - Retry?"
type="submit"
disabled={this.validate}
/>
),
READY: (
<input value="Submit" type="submit" disabled={this.validate} />
)
}[status]
}
</form>
<div>
<h3>People</h3>
<ul>
{this.props.people.map(({ name, email, department, course }) => (
<li key={new Date()}> {[name, email, department, course].join(' - ')}</li>
))}
</ul>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {
isLoading: state.isLoading,
fields: state.person,
people: state.people,
saveStatus: state.saveStatus
};
};
const mapDispatchToProps = dispatch => {
return {
onSubmit: people => {
dispatch(savePeople(people));
}
};
};
Form = reduxForm({ form: 'contact', validate: Form.validate });
export default connect(mapStateToProps, mapDispatchToProps)(Form);
我認為這肯定會產生問題:
{
{
SAVING: <input value="Saving ..." type="submit" disabled />,
SUCCESS: <input value="Saved!" type="submit" disabled />,
ERROR: (
<input
value="Save Failed - Retry?"
type="submit"
disabled={this.validate}
/>
),
READY: (
<input value="Submit" type="submit" disabled={this.validate} />
)
}[status]
}
在這里,您正在嘗試渲染無效的反應子對象。 刪除它並查看錯誤是否仍然存在。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.