Question

可能做一些愚蠢的事情，但是如果有人可以帮助的话。我认为这是未定义的。因此，我尝试使用setState并收到以下错误。

第20行未捕获的TypeError：无法读取未定义的属性“ 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;

Answer 1

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

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

来自doc：

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

将它们绑定到构造函数中然后使用它们时，会更清洁。

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>

Answer 2

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

您应该使用箭头函数使this在函数内部正常工作

SetState未定义

2 个答案: