反应：TypeError：无法读取未定义的属性“状态”。需要说明

Posted 2023-03-16

【中文标题】反应：TypeError：无法读取未定义的属性“状态”。需要说明

【英文标题】：React: TypeError: Cannot read property 'state' of undefined. Explanation required

【发布时间】：2021-09-18 16:44:44

【问题描述】：

我刚刚开始使用 React，我遇到了这个小 TypeError: Cannot read property 'state' of undefined，我相信这是一个基本的 JS 东西。有人可以解释一下为什么我使用普通函数语法而不是箭头函数语法时不断收到此错误。这是我写的代码：

class App extends React.Component 
  state = term: '';

  onFormSubmit(e) 
    e.preventDefault();
    console.log(this.state.term)
  

  render() 
    return (
      <div className="ui segment">
        <form onSubmit=this.onFormSubmit className="ui form">
          <div className="field">
            <label>Image Search</label>
            <input
              type="text"
              placeholder="Search"
              value=this.state.term
              onChange=e => this.setState( term:e.target.value )
            />
          </div>
        </form>
        <h1 className="ui segment">this.state.term</h1>
      </div>
    );
  

我们将不胜感激。谢谢！

【参考方案1】：

类组件中的函数有两种使用this的方式

第一个是bind他们在constructor里面

 constructor() 
    super();
    this.onFormSubmit= this.onFormSubmit.bind(this);
  

其次是使用这种方法

  onFormSubmit = e => 
    e.preventDefault();
    console.log(this.state.term)
  

【参考方案2】：

你正在使用一个类组件，所以你需要一个像这样的构造函数 (documentation)

class Example extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      term: ''
    ;
    this.onFormSubmit= this.onFormSubmit.bind(this);
  

super 关键字是指父类。

用来调用父类的构造函数，访问父类的属性和方法，这显然是你想做的。

当事件发生并调用处理程序时，this 值回退到默认绑定并设置为undefined，因为类声明和原型方法在严格模式下运行。 当我们将事件处理程序的this 绑定到构造函数中的组件实例时，我们可以将其作为回调传递，而不必担心它会丢失上下文。 Read more

然后，如果你想使用常规函数，你需要将该函数的this 与你声明的类绑定。

此时你可以开始编写你的函数了：

  onFormSubmit(e) 
    e.preventDefault();
    console.log(this.state.term)
  

另一种解决方法是使用箭头函数：

  const onFormSubmit = e => 
    e.preventDefault();
    console.log(this.state.term)
  

或者，您可以使用函数组件。箭头函数起作用的原因是它没有创建它的own this。所以，onFormSubmit 中的 this 指的是 Example 类而不是它本身，这显然是未定义的 (Read more)。

【讨论】：

对于state 不需要构造函数。他也可以这样定义state。

【参考方案3】：

建议：- 使用功能组件

有两种方法可以解决这个问题

改变：-

<form onSubmit=this.onFormSubmit className="ui form">

到

<form onSubmit=(e) => this.onFormSubmit(e) className="ui form">

或

改变：-

onFormSubmit(e)
    e.preventDefault();
    console.log(this.state.term);
  ;

到

const onFormSubmit = (e) => 
        e.preventDefault();
        console.log(this.state.term);
      ;

【讨论】：

第一种写法没有错。他不必在那里改变任何东西