从组件 React Native 中访问状态

Posted 2023-02-23

【中文标题】从组件 React Native 中访问状态

【英文标题】：Accessing state from within component 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的可能重复

【参考方案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>
      )