ES7로 응답: Uncaughed TypeError: 정의되지 않은 속성 '상태'를 읽을 수 없습니다.

ES7로 응답: Uncaughed TypeError: 정의되지 않은 속성 '상태'를 읽을 수 없습니다.

이 질문에는 이미 답변이 있습니다.

이벤트 핸들러 내부의 React 인스턴스에 액세스할 수 없습니다. (답변 19개)

닫힘7년 전.

AuthorForm 입력 상자에 항목을 입력할 때마다 Unaught TypeError: Undefined 속성 'state'를 읽을 수 없습니다.리액트와 ES7을 사용하고 있습니다.

Manage의 setAuthorState 함수의 세 번째 줄에서 오류가 발생합니다.작성자 페이지console.log(this.state)를 넣어도 코드의 행에 관계없이 사용할 수 있습니다.authorState)에서는 console.log에서 정지하고 오류를 호출합니다.

인터넷을 통해 다른 사용자의 유사한 문제를 찾을 수 없습니다.

이것은 관리입니다.AuthorPage 코드:

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 

Author Form 코드는 다음과 같습니다.

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

이벤트 핸들러를 올바른 컨텍스트에 바인드해야 합니다( ).this):

onChange={this.setAuthorState.bind(this)}

전화하고 있는지 확인해 주세요.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}
      />
    );
  }
}

언급URL : https://stackoverflow.com/questions/35287949/react-with-es7-uncaught-typeerror-cannot-read-property-state-of-undefined