Javascript React Native：this.setState 不是函数

React Native: this.setState is not a function

提问by Steed-Asprey

I see a number of questions on here relating to this same issue, but it seems none match the issue I'm having, and are a bit more complex.

我在这里看到许多与同一问题相关的问题，但似乎没有一个与我遇到的问题相匹配，而且更复杂一些。

I am in the process of learning ReactJS and React Native. I'm in the midst of reading and following the code examples from "Learning React Native" book here: https://github.com/bonniee/learning-react-native

我正在学习 ReactJS 和 React Native。我正在阅读和关注“Learning React Native”一书中的代码示例：https: //github.com/bonniee/learning-react-native

For some reason, calling this.setState in the code below when the handleTextChange function is called, causes the "this.SetState is not a function." error. My question is why? Unlike other questions about this same issue, I don't believe my call to this.stateState is buried in a callback function or if statement. Why is it undefined?

出于某种原因，在调用 handleTextChange 函数时在下面的代码中调用 this.setState 会导致“this.SetState 不是函数”。错误。我的问题是为什么？与关于同一问题的其他问题不同，我不相信我对 this.stateState 的调用隐藏在回调函数或 if 语句中。为什么是未定义的？

Here is my code:

这是我的代码：

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: "",
      forecast: null
    };
  }

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

    render() {
    return (
      <View style={styles.container}>
      <Text style={styles.welcome}>
      You input {this.state.zip}.
      </Text>
      <TextInput
      style={styles.input}
      onSubmitEditing={this._handleTextChange}/>
      </View>
    );
  }
}

回答by atlanteh

Do not use bind inside a render. bind is a rather expensive operation and should only happen once. you have two options:

不要在渲染中使用绑定。bind 是一个相当昂贵的操作，应该只发生一次。你有两个选择：

either bind the function in the constructor:

要么在构造函数中绑定函数：

this._handleTextChange = this._handleTextChange.bind(this);

or use arrow function:

或使用箭头功能：

onSubmitEditing={(e) => this._handleTextChange(e)} />

Edit

编辑

Apparently arrow functions inside render is also a bad practice (Thx to Adam Terlson in the comments and answer below). You can read eslint docswhich states:

显然，渲染中的箭头函数也是一种不好的做法（感谢 Adam Terlson 在下面的评论和回答中）。您可以阅读eslint 文档，其中指出：

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.

JSX 道具中的绑定调用或箭头函数将在每次渲染时创建一个全新的函数。这对性能不利，因为它会导致垃圾收集器被调用的方式超出必要的范围。

Using arrow functions is obviously not as bad as using bind, but nevertheless should be avoided.

使用箭头函数显然没有使用绑定那么糟糕，但仍然应该避免。

回答by Hemadri Dasari

Regarding arrow function you also need to change _handleTextChange(event) function. Other answers didn't talk about how to change normal function to arrow function. So providing as an answer which may help others

关于箭头函数，您还需要更改 _handleTextChange(event) 函数。其他答案没有谈到如何将普通功能更改为箭头功能。所以提供一个可以帮助其他人的答案

You need to change handler function

您需要更改处理程序功能

from

从

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

To

到

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

回答by Adam Terlson

The issue is context binding, as identified in the other comments and answers here.

问题是上下文绑定，如此处的其他评论和答案中所述。

However, the performance of bind itself is a non-issue. The way-more-relevant issue is that using bind or arrowsin your render methods creates a new function on each render, resulting in a change of props for the child that receives them, forcing a re-render.

但是，bind 本身的性能不是问题。更相关的问题是，在渲染方法中使用绑定或箭头会在每次渲染时创建一个新函数，从而导致接收它们的孩子的道具发生变化，从而强制重新渲染。

You have two viable options:

您有两个可行的选择：

class WeatherProject extends Component {
  constructor(props) {
    super(props);

    this._handleTextChange = this._handleTextChange.bind(this);
  }
  // ...
}

Or you can use the class property notation and assign arrow functions if you're using the babel pluginfor it.

或者，如果您使用babel 插件，您可以使用类属性符号并分配箭头功能。

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    // ...
  }

  handleTextChange = (event) => {
    this.setState({zip: event.nativeEvent.text});
  }
  // ...
}

I strongly recommend you use the eslint package with the react recommended rulesenabled. It will catch errors like using bind/arrows in your render, as well as tell you that underscore prefixed functions are ugly and totally not necessary in React. :)

我强烈建议您使用启用了react 推荐规则的 eslint 包。它会捕获诸如在渲染中使用绑定/箭头之类的错误，并告诉您下划线前缀函数很丑陋，并且在 React 中完全没有必要。:)

回答by Keshav Gera

this.setState is not a function--- Solved using this

this.setState 不是函数---用这个解决

 let that = this;

 that.setState({membersArray:response.data})

回答by Dasun_96

I had the same problem when trying to set the state. when I bind the function inside the constructor, the issue gets solved. check with below binding

我在尝试设置状态时遇到了同样的问题。当我在构造函数中绑定函数时，问题就解决了。检查以下绑定

 constructor(props) {
    super(props);
    this.state = {
      zip: "",
      forecast: null
    };

   this._handleTextChange = this._handleTextChange.bind(this);

  }