this.setState未定义

Question

我一直看到使用=>或.bind(this)的答案,但这些解决方案都没有奏效.

import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export default class MyWeatherApp extends Component {
  constructor(props) {
  super(props);

  this.state = {};
}

getInitialState() {
  return {
    zip: '',
    forecast: null,
  };
}

_handleTextChange(event) {
  var zip = event.nativeEvent.text;
  this.setState({zip: zip});
}

解:

_handleTextChange = (event) => {
  var zip = event.nativeEvent.text;
  this.setState({zip: zip});
  alert('click');
}

Answer 1

当你extend React.Component与ES2015类语法,你需要你的动作处理程序绑定到你的类的上下文.

试试这个: onChange={e => _handleTextChange(e)}

通常,最好不要在bind内部使用箭头函数或方法,render因为它会在任何render调用中生成函数的新副本.将函数声明移动到class constructor.

在这种情况下,我个人更喜欢使用箭头函数作为类属性

class MyClass extends React.Component {

  handleClick = () => {
    // your logic
  };

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

它不是ES2015规范的一部分,但是babel stage-0预设支持这种语法

您可以在本文中阅读React中有关上下文绑定的更多信息

Answer 2

让我详细说一下.因为我不得不浪费大量时间研究它,我不希望任何人重复这个...

如果你不使用箭头功能,你必须绑定this像'9'线

class MyClass extends React.Component {

  handleButtonClick(){
    console.log("Hello from here");
  };

  render() {
    return (
      <button onClick={this.handleButtonClick.bind(this)}>Click me</button>
    );
  }
}

另一种方法是使用ES6 Arrow功能.在这种情况下,您无需绑定'this'.安装'babel stage-1预设'将支持此功能.

在项目中运行以下命令:

npm i babel-preset-stage-1 --save

你的.babelrc看起来像这样.特别是预设中的"stage-1".

{
  "presets": ["es2015", "react", "stage-1"],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    }
  }
}

正如我所说,你的组件将是这样的:

class MyClass extends React.Component {

      handleButtonClick = () => {
        console.log("Hello from here");
      };

      render() {
        return (
          <button onClick={this.handleButtonClick}>Click me</button>
        );
      }
    }

Answer 3

constructor 你也可以像这样绑定它

class MyClass extends React.Component {
  constructor(props){
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
 }
  handleButtonClick(){
    console.log("Hello from here");
  }

  render() {
    return (
      <button onClick={this.handleButtonClick}>Click me</button>
    );
  }
}

Answer 4

问题是：我遇到了错误：this.setState不是一个函数

给定我将函数绑定到组件构造函数中的状态，如下所示：

 this.getRequestData = this.getRequestData.bind(this);

我的职能是：

getRequestData(){
    axios.post('http://example.com/getInfo', jsonData)
                        .then(function (res) {
                            console.log(res);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                        this.setState({ stateVaribale });
                    })
}

解决方案是在axios请求中使用arrow functions而不是使用keyword函数，因为在axios请求中引用功能而不是组件状态会引起混淆。

getRequestData(){
axios.post('http://example.com/getInfo', jsonData)
                        .then(res => {
                        console.log(res);
                        })
                        .catch(error => {
                            console.log(error);
                        });
                        this.setState({ stateVaribale });
                    })}