与 ES7 react：未捕获的类型错误：无法读取未定义的属性“状态”

IT技术 javascript reactjs ecmascript-6 ecmascript-2016
2021-03-30 17:22:37

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

错误发生在 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

这是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
2个回答

您必须将事件处理程序绑定到正确的上下文 ( this)：

onChange={this.setAuthorState.bind(this)}
@Khpalwalk 不客气:-)
2021-05-22 17:22:37
我同意，我觉得“这个”似乎让许多开发人员望而却步，他们并不完全理解“这个”真正代表什么。我觉得在 React 中开发人员对“this”有更好的理解，现在这是否纯粹是肤浅的又是另一回事。对于那些不理解“this”的人应该看看 Kyle Simpsons ，你不知道 github 上的 js repo。他的用户名是 getify，其中有几章专门介绍“this”，这将有助于深入了解“this”在给定上下文中的含义。
2021-06-02 17:22:37
是的，谢谢你，它对我有用。我忘了在我的代码中使用绑定。
2021-06-16 17:22:37
我用了你的榜样。谢谢。
2021-06-19 17:22:37
我发现这样做的一个更有说服力的方法是使用箭头函数，它会固有地将 this 绑定到函数，我发现它在编写 React 代码时特别有用。所以你可以使用 setAuthorState=event=>{...}。不需要额外的代码行将 this 绑定到函数。此外，每次单击此组件时，都不需要额外的绑定成本。
2021-06-21 17:22:37

确保您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}
      />
    );
  }
}
替代方法对我有用 谢谢你的回答
2021-06-16 17:22:37
其它你可能感兴趣的问题
上一篇运行 Jest 测试时未定义 `regeneratorRuntime` 下一篇允许typescript编译器仅在一个react​​状态属性上调用 setState