React：状態のパラメーターが未定義でないかどうかをどのように確認できますか？

こんにちは、お時間をいただきありがとうございます！

私は現在、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

JavaScriptで「未定義」をチェックする方法は？

変数が「未定義」か「null」かを判断する方法は？

私たちを手伝ってくれますか？？？

お時間をいただきありがとうございます。