您好，感谢您的时间！
我目前正在关注React，Flux教程：https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents
我面临的困难是当我尝试创建一个新作者时，当我在表单上写下它时会输出：
Uncaught TypeError: Cannot read property 'firstName' of undefined
at ManageAuthorPage._this.setAuthorState (manageAuthorPage.js:20)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at Object.invokeGuardedCallback (react-dom.development.js:438)
at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:452)
at executeDispatch (react-dom.development.js:836)
at executeDispatchesInOrder (react-dom.development.js:858)
at executeDispatchesAndRelease (react-dom.development.js:956)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:967)
at Array.forEach (<anonymous>)
at forEachAccumulated (react-dom.development.js:935)
at processEventQueue (react-dom.development.js:1112)
at runEventQueueInBatch (react-dom.development.js:3607)
at handleTopLevel (react-dom.development.js:3616)
at handleTopLevelImpl (react-dom.development.js:3347)
at batchedUpdates (react-dom.development.js:11082)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)
ManageAuthorPage._this.setAuthorState @ manageAuthorPage.js:20
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:452
executeDispatch @ react-dom.development.js:836
executeDispatchesInOrder @ react-dom.development.js:858
executeDispatchesAndRelease @ react-dom.development.js:956
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:967
forEachAccumulated @ react-dom.development.js:935
processEventQueue @ react-dom.development.js:1112
runEventQueueInBatch @ react-dom.development.js:3607
handleTopLevel @ react-dom.development.js:3616
handleTopLevelImpl @ react-dom.development.js:3347
batchedUpdates @ react-dom.development.js:11082
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
在浏览器中详细说明：
×
TypeError: Cannot read property 'firstName' of undefined
ManageAuthorPage._this.setAuthorState
C:/Users/YonePC/WebstormProjects/flux/src/components/authors/manageAuthorPage.js:20
17 | setAuthorState = (event) => {
18 | let field = event.target.name;
19 | let value = event.target.value;
> 20 | if (this.state.author.firstName !== null) {
21 | this.state.author[field] = value;
22 | } else {
23 | this.state = {
View compiled
▶ 16 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
那么你看到我试图检查this.state.author.firstName是否为null来为我们正在创建的作者创建一个新状态，如果没有，那么我们正在编辑一个现有的，我们应该得到书面并更新。
manageAuthorPage.js
import React from 'react';
import {AuthorForm} from "./authorForm";
import toastr from 'toastr';
import AuthorStore from "../../stores/authorStore";
import {AuthorActions} from "../../actions/myAuthorActions";
class ManageAuthorPage extends React.Component {
state = {
author: {
id: '',
firstName: '',
lastName: '',
},
};
setAuthorState = (event) => {
let field = event.target.name;
let value = event.target.value;
if (this.state.author.firstName !== null) {
this.state.author[field] = value;
} else {
this.state = {
author: {
id: '',
firstName: '',
lastName: '',
},
};
}
return this.setState({author: this.state.author});
};
saveAuthor = (event) => {
event.preventDefault();
AuthorActions.createAuthor(this.state.author);
toastr.success('Author saved ;=)');
};
componentDidMount = () => {
const queryAuthorId = this.props.location.pathname; //from the path '/author:id'
const authorId = queryAuthorId.substr(queryAuthorId.lastIndexOf("/") + 1);
if (authorId) {
this.setState({author: AuthorStore.getAuthorById(authorId)});
}
// console.log(authorId.substr(authorId.lastIndexOf("/") + 1));
};
render() {
return (
<AuthorForm author={this.state.author}
onChange={this.setAuthorState}
onSave={this.saveAuthor}/>
);
};
}
export {ManageAuthorPage}
我还包括子组件，因为它们可能对此问题很重要：
import React from 'react';
import {Input} from "../common/textInput";
import Link from "react-router-dom/es/Link";
class AuthorForm extends React.Component {
render() {
const {firstName = '', lastName = '', id = ''} = this.props.author || {};
return (
<form>
<h1>Manage author</h1>
<Input
name="firstName"
label="First Name"
value={firstName}
onChange={this.props.onChange}
/>
<Input
name="lastName"
label="Last Name"
value={lastName}
onChange={this.props.onChange}
/>
<button type="submit" value="Save" className="btn btn-default" onClick={this.props.onSave}><Link
to="/authors">Save
author</Link>
</button>
</form>
);
}
}
export {AuthorForm}
而且我认为更深层次的孩子与这种困难无关，但为了清楚起见，我将其包括在内：
import React from 'react';
import PropTypes from 'prop-types';
class Input extends React.Component {
render() {
let wrapperClass = 'form-group';
if (this.props.error && this.props.error.length > 0) {
wrapperClass += ' ' + 'has-error';
}
return (
<div className={wrapperClass}>
<label htmlFor={this.props.name}>{this.props.label}</label>
<div className="field">
<input type="text"
name={this.props.name}
className="form-control"
placeholder={this.props.placeholder}
ref={this.props.name}
value={this.props.value}
onChange={this.props.onChange}
/>
<div className="input">{this.props.error}</div>
</div>
</div>
);
}
}
export {Input};
此外，我们在这里有完整的应用程序，我按照教程编写了：https://github.com/YoneMoreno/ReactFluxAuthorsPageTutorial
我也阅读了以下信息：
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined
How to check for "undefined" in JavaScript?
How to determine if variable is 'undefined' or 'null'?
你可以帮助我吗？感谢您的时间。
答案 0 :(得分：2)
请注意：
null === undefined // false!
让我们说..
let a = undefined
a === undefined // true
但是..
a === null // false
a == null // true
所以这样的事情可以帮助你：
if (this.state.author.firstName !== undefined) {
this.state.author[field] = value;
}
或检查null和undefined
if (this.state.author.firstName != null) {
this.state.author[field] = value;
}