TypeError：无法读取未定义的属性“setState” - PokeApi答案

【问题标题】：TypeError: Cannot read property 'setState' of undefined - PokeApiTypeError：无法读取未定义的属性“setState” - PokeApi
【发布时间】：2021-07-24 19:09:28
【问题描述】：

我正在尝试使用参数将输入文本类型中的文本发送到另一个组件。但我得到了下一个错误

TypeError: 无法读取未定义的属性“setState”

我认为使用重定向是最好的选择，但我不确定。

export default class SearchBar extends React.Component {
    
  constructor(props) {
    super(props);
    this.state = {redirect: false , value: ''};
  }

    setRedirect(event) {
        this.setState({
          redirect: true,
          value: event.target.value
        });
      };
      renderRedirect = () => {
        if (this.state.redirect) {
          return <Redirect to={{
            pathname: `/pokemon/filtered/${this.state.value}`,
           }}/>;
        }
      };

    render() {
      return (
        <form>
          <input type="text" value={this.state.value} onChange={this.setRedirect()} />
        </form>
      );
    }
  }

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你必须在这里犯错

在onChange 的输入行上，您实际上调用了该函数，因为您添加了“()”
你应该这样做：

 <input type="text" value={this.state.value} onChange={this.setRedirect} />

第二个因为这是一个你需要将函数绑定到构造函数上的类的类

  constructor(props) {
    super(props);
    this.state = {redirect: false , value: ''};
    this.setRedirect = this.bind.setRedirect(this)
  }

或者为了简化事情使用箭头函数因为箭头函数将始终属于调用该函数的对象

【讨论】：

【解决方案2】：

在react中绑定事件处理器的正确方式是

<button onclick={activateLasers}>
在 JavaScript 世界中。 this 默认设置为调用者。请参阅 MDN 上的 Function.prototype.bind。要将类方法绑定到类，您可以 1. 使用公共类字段语法。 2. 在构造函数中绑定。

参考资料：

【讨论】：