react-native - 无法访问组件函数内的 setState答案

【问题标题】：react-native - can't access setState inside component functionreact-native - 无法访问组件函数内的 setState
【发布时间】：2017-12-18 07:56:36
【问题描述】：

我正在学习 react-native，现在我被这个错误困在状态课上：

_this2.setState is not a function.

这是当前的代码块。

...
export default class StopWatch extends Component {

  constructor(props){
    super(props);
    this.state = {
      timeElapsed: null
    }
  }

  handleStartStopClick(){
    var startTime = new Date();

    setInterval(() => {
      this.setState(previousState => {
        return {timeElapsed:new Date() - startTime};
      });
    }, 100);
  }
...

我做错了什么？

【问题讨论】：

标签： reactjs react-native state

【解决方案1】：

handleStartStopClick 是从 this 不是您的类的实例的上下文中调用的。您可以通过将.bind(this) 添加到您作为点击处理程序传递的函数来避免这种情况。

<TouchableHighlight onPress={this.handleStartStopClick.bind(this)}>

【讨论】：

成功了！我错过了bind(this) 块！谢谢！
除此之外，我建议您在构造函数中绑定函数，而不是在 onPress 中。否则，您将在每次重新渲染组件时绑定您的函数，这可能会导致性能下降。
@AntoineGrandchamp 当然，这是执行此操作的高效方式

【解决方案2】：

试试这个：

 this.setState({timeElapsed : (new Date() - startTime)})

您必须在构造函数中使用 bind(this) 或

定义您的函数

handleStartStopClick = () => {...}

【讨论】：

如何使用已弃用的setState 版本？
我认为，问题是 setState 不起作用，它还将一个状态设置为另一个状态。像这样： this.setState( state : value you want set )
是的。问题是 handleStartStopClick 在没有绑定的情况下被调用，因此上下文错误。因此，您的回答不仅无济于事，而且会宣传已弃用的 API。
好的，谢谢@YuryTarabanko。我已经确定了我的答案^^。我们可以在 ES 6 中使用 bind(this) 或使用直接箭头函数