时间戳

首页 > 解决方案 > SetState 未定义

javascript - SetState 未定义

问题描述

可能会做一些愚蠢的事情，但如果有人能帮忙的话。我认为这是未定义的。所以我试图使用 setState 并得到以下错误。

第 20 行未捕获的类型错误：无法读取未定义的属性“setState”

import React from 'react';

class TimeoutModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      timeLeft: 60,
      timeoutModal: true
    };
  }

  componentDidMount() {
    setInterval(() =>{
      this.setState({ timeLeft: this.state.timeLeft - 1 });
    }, 1000);
  }

  handleClick(e) {
    this.setState({timeoutModal: false});
  }

  render() {
    console.log(this.props.timeoutStatus);
    return (
      <div className="timeout-modal">
        <div className="timeout-modal__container">
          <p>Would you like to continue? {this.state.timeLeft}</p>
          <button onClick={this.handleClick} className="timeout-modal__container-button">Yes</button>
        </div>
      </div>
    );
  }
}

export default TimeoutModal;

标签： javascriptreactjs

解决方案

您需要将handleClick事件与当前组件实例绑定。所以将onChange事件处理程序更改为。

<button onClick={this.handleClick.bind(this)} className="timeout-modal__container-button">Yes</button>

从文档：

您必须小心 JSX 回调中 this 的含义。在 JavaScript 中，默认情况下不绑定类方法。如果您忘记绑定this.handleClick并将其传递给 onClick，则在 实际调用该函数时this 将是未定义的。

当您将它们绑定到构造函数中然后使用它们时，会更干净。

constructor(props) {
  super(props);
  this.state = {
    timeLeft: 60,
    timeoutModal: true
  };
  this.handleClick = this.handleClick.bind(this)
}

现在编写处理程序。

<button onClick={this.handleClick} className="timeout-modal__container-button">Yes</button>

推荐阅读