与ES7反应：未捕获的TypeError：无法读取未定义的属性“state” [英] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined

问题描述

我收到此错误 未捕获的TypeError：每当我在AuthorForm的输入框中输入任何内容时，都无法读取未定义的属性状态 。我正在使用React和ES7。

I'm getting this error Uncaught TypeError: Cannot read property 'state' of undefined whenever I type anything in the input box of AuthorForm. I'm using React with ES7.

错误发生在ManageAuthorPage 中第3行的setAuthorState函数中。即使我在setAuthorState中放置了console.log（this.state.author），它也会停在console.log并调出错误。

The error occurs on 3rd line of setAuthorState function in ManageAuthorPage. Regardless of that line of code even if I put a console.log(this.state.author) in setAuthorState, it will stop at the console.log and call out the error.

无法通过互联网找到其他人的类似问题。

Can't find similar issue for someone else over the internet.

这是 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 

这里是 AuthorForm 代码：

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（）！

Make sure you're calling super() as the first thing in your constructor!

你应该为设置 setAuthorState 方法

You should set this for setAuthorState method

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}
      />
    );
  }
}

基于箭头的另一种选择函数：

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}
      />
    );
  }
}

这篇关于与ES7反应：未捕获的TypeError：无法读取未定义的属性“state”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！