[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] （未定義のプロパティ 'state'は読み込めません。

質問

次のようなエラーが発生します。 Uncaught TypeError: 未定義のプロパティ 'state' を読み取ることができません。 AuthorFormの入力ボックスに何か入力するたびに、「あれ？ReactとES7を使用しています。

でエラーが発生します。 ManageAuthorPageのsetAuthorState関数の3行目 . setAuthorStateにconsole.log(this.state.author)を入れても、その行に関係なく、console.logで止まってエラーが呼び出されるのだそうです。

インターネット上で他の人の同様の問題を見つけることができません。

以下は、その内容です。 ManageAuthorPage のコードで表示されます。

import React, { Component } from 'react';
import AuthorForm from './authorForm';

class ManageAuthorPage extends Component {
  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  setAuthorState(event) {
    let field = event.target.name;
    let value = event.target.value;
    this.state.author[field] = value;
    return this.setState({author: this.state.author});
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.setAuthorState}
      />
    );
  }
}

export default ManageAuthorPage 

そして、こちらが オーサフォーム のコードで表示されます。

import React, { Component } from 'react';

class AuthorForm extends Component {
  render() {
    return (
      <form>
                <h1>Manage Author</h1>
        <label htmlFor="firstName">First Name</label>
                <input type="text"
                    name="firstName"
          className="form-control"
                    placeholder="First Name"
          ref="firstName"
          onChange={this.props.onChange}
                    value={this.props.author.firstName}
          />
        <br />

        <label htmlFor="lastName">Last Name</label>
                <input type="text"
                    name="lastName"
          className="form-control"
                    placeholder="Last Name"
          ref="lastName"
                    onChange={this.props.onChange}
          value={this.props.author.lastName}
                    />

                <input type="submit" value="Save" className="btn btn-default" />
            </form>
    );
  }
}

export default AuthorForm

どのように解決するのですか？

電話をかけていることを確認する super() をコンストラクタの最初に指定します。

を設定する必要があります。 this にとって setAuthorState 方法

class ManageAuthorPage extends Component {

  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  constructor(props) {
    super(props);
    this.handleAuthorChange = this.handleAuthorChange.bind(this);
  } 

  handleAuthorChange(event) {
    let {name: fieldName, value} = event.target;

    this.setState({
      [fieldName]: value
    });
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.handleAuthorChange}
      />
    );
  }
}

に基づく別の選択肢もあります。 arrow function :

class ManageAuthorPage extends Component {

  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  handleAuthorChange = (event) => {
    const {name: fieldName, value} = event.target;

    this.setState({
      [fieldName]: value
    });
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.handleAuthorChange}
      />
    );
  }
}