javascript - 响应 native 增量状态 onPress

Question

我刚开始学习 React/React Native，遇到了以下问题。当点击 <TouchableWithoutFeedback>元素， View 不会增加。

代码如下:

class SingleHabit extends Component {

  constructor() {
    super();
    this.state = {count: 0};
  }

  _incrementCount() {
    this.setState = ({
      count: count + 1
    });
  }

  render () {
    return (
      <TouchableWithoutFeedback onPress={ () => this._incrementCount() }>
        <View
          style= {[
            styles.singleHabit,
            {backgroundColor: this.props.color}
          ]}
        >
          <Text style={styles.habitNameText}>{this.props.text}</Text>
          <Text style={styles.countText}>{this.state.count}</Text>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

另外，为了自学，如果无论如何你会重构这个(或者只是更好的做事方式)，我很乐意听到!

Answer 1

incrementCount 函数中的

this 不会自动绑定(bind)到该类。如果将其更改为使用箭头函数，则 this 的范围将变为类。如果你想根据以前的状态值修改状态，那么使用可选函数 setState 也是一个很好的做法:

   _incrementCount = () => {
     this.setState(prevState => ({ count: prevState.count + 1 }));
   }