从组件 React Native 中访问状态答案

【问题标题】：Accessing state from within component React Native从组件 React Native 中访问状态
【发布时间】：2018-09-25 04:57:17
【问题描述】：

我对本机反应并在使用 RkButton 并在单击按钮时更新状态的应用程序上工作还很陌生。代码是这样的。

render() {
    const { user } = this.props;

    let navigate = this.props.navigation.navigate;

    let items = MainRoutes.map(function (route, index) {
      return (
        <RkButton
          rkType='square'
          key={index}
          onPress={() => {
              this.setState({
                redeem: true
              });
          }}>
        </RkButton>
      )
    });

      return (
        <View style={{flex: 1,}}>
            <ScrollView
              alwaysBounceVertical
              overScrollMode={"always"}
              style={{flex: 1, backgroundColor: 'white'}}
              refreshControl={
                  <RefreshControl
                  refreshing={this.state.refreshing}
                  onRefresh={() => this.handleRefresh()}
                  />
              }
              contentContainerStyle={styles.rootContainer}>
                {items}
            </ScrollView>
          </View>
      )
}

我得到“this.setState 不是函数”，因为我使用了 UIKitten 库中的代码，但我并不完全熟悉它。我很确定这与 ES6 或我对组件工作方式的误解有关。

有人可以启发我吗？

【问题讨论】：

React 'cannot read property of undefined' when using map的可能重复

标签： javascript reactjs react-native components

【解决方案1】：

你在这里失去了组件上下文：

  // Component context
  function (route, index) {
    // Functions context

改成：

  (route, index) => {

【讨论】：

啊哈！好，谢谢！是否有任何时候您想失去范围？难道只是为了封装？
@swimmingG 您可能想要松开 context （抱歉造成混淆），例如当您想要引用单击的元素时在处理程序中。例如。在 jquery $("a").click(function(){ $(this) /*!!*/ })
嗯，好的，所以this 当你使用函数（路由，索引）时，就是被点击的按钮。谢谢！
@swimmiG 在这种情况下它可能是window，这不是很有用

【解决方案2】：

问题是用关键字function 声明的函数有它自己的上下文this。您需要使用箭头函数来访问父上下文：

let items = MainRoutes.map((route, index) => {
  return (
    <RkButton
      rkType='square'
      key={index}
      onPress={() => {
          this.setState({
            redeem: true
          });
      }}>
    </RkButton>
  )
});

【讨论】：

【解决方案3】：

您应该保留 this 的副本并在任何其他函数中使用它。需要时，如第 3 行所述。

所以你的代码有一些小的变化

render() {
    const { user } = this.props;
    let self=this;

    let navigate = this.props.navigation.navigate;

    let items = MainRoutes.map(function (route, index) {
      return (
        <RkButton
          rkType='square'
          key={index}
          onPress={() => {
              self.setState({
                redeem: true
              });
          }}>
        </RkButton>
      )
    });

      return (
        <View style={{flex: 1,}}>
            <ScrollView
              alwaysBounceVertical
              overScrollMode={"always"}
              style={{flex: 1, backgroundColor: 'white'}}
              refreshControl={
                  <RefreshControl
                  refreshing={this.state.refreshing}
                  onRefresh={() => this.handleRefresh()}
                  />
              }
              contentContainerStyle={styles.rootContainer}>
                {items}
            </ScrollView>
          </View>
      )
}

【讨论】：