javascript - React Native : this. setState 不是一个函数

Question

我在这里看到了许多与同一问题相关的问题，但似乎与我遇到的问题不符，而且有点复杂。

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

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

这是我的代码:

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>
    );
  }
}

Answer 1

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

要么在构造函数中绑定(bind)函数:

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

或使用箭头功能:

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

编辑

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

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.

使用箭头函数显然不如使用bind那么糟糕，但仍然应该避免。