如何在React Native应用程序中替换componentWillReceiveProps?

阿吉斯

我听说componentWillRecieveProps生命周期方法不是在React Native项目中使用的好选择,而是使用getDerivedStateFromProps。所以我试图用getDerivedStateFromProps替换我的componentWillRecieveProps。但是我不知道这样做,我尝试了componentDidUpdate(),但是它反复调用setstate。

  componentWillReceiveProps(nextProps) {

  if(nextProps.shopList.isFetching===false) {
        this.setState({isLoading:false})
    if(!_.isEqual(nextProps.shopList, this.props.shopList) && nextProps.shopList.error===false ) {
       this.formatShops(nextProps.shopList.shops)
     } else {

    }
  } else {
    this.setState({isLoading:true})
  }


  if(nextProps.common.isFetching===false) {

    this.setState({isLoading:false})
    if(nextProps.common.error===false) {
      if(!_.isEqual(nextProps.common, this.props.common) && nextProps.common.error===false ) {
       if(nextProps.common.otpverifysucess==false) {
            this.props.navigation.dispatch(logoutAction);
      }
     }
    }
  }
  }

这是我的整个组件WillRecieveProps。任何人都可以帮助将其移至getDerivedStateFromProps生命周期方法

玛雅·舒克拉(Mayank Shukla)

想法是,将所有状态更新部分放入getDerivedStateFromProps方法中,并将所有基于新道具和旧道具值之间的差异的动作放入componentDidUpdate方法中。componentDidUpdate将获得prevProps值作为参数,this.props并将具有新的props值。

要更换componentWillReceivePropscomponentDidUpdate

所以,如果您要更换componentWillReceivePropscomponentDidUpdate,更换nextPropsthis.propsthis.propsprevProps

nextProps(componentWillReceiveProps的参数)为this.props(中的componentDidUpdate

this.props(在componentDidUpdate内部)到prevProps(在中componentDidUpdate

试试这个代码:

getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.shopList.isFetching === false || nextProps.common.isFetching === false) {
    return { isLoading: false }
  } else {
    return { isLoading: true }
  }
}

componentDidUpdate(prevProps) {
  if(this.props.shopList.isFetching === false) {
    if(!_.isEqual(this.props.shopList, prevProps.shopList) && this.props.shopList.error === false ) {
      this.formatShops(this.props.shopList.shops)
    }
  }

  if(this.props.common.error === false && this.props.common.isFetching === false) {
    if(!_.isEqual(this.props.common, prevProps.common) && this.props.common.error === false) {
      if(this.props.common.otpverifysucess == false) {
        this.props.navigation.dispatch(logoutAction);
      }
    }
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在React Native应用程序中升级Gradle

如何在React Native应用程序中创建“为该应用程序评分”链接?

如何在React Native iOS应用程序中更新应用程序版本?

如何在Tkinter应用程序中替换图标

如何在React Native上的Kill应用程序中检测到一个应用程序?

如何在React Native应用程序中删除iOS的原生手势?

可下载内容如何在 iOS 的 react-native 应用程序中工作?

如何在react-native中在后台杀死的Android应用程序保持状态

如何在混合React-native应用程序中传递初始属性

如何在 React Native 应用程序中显示 git-describe?

如何在 iOS 中安装 React Native Expo 应用程序?

如何在React Native应用程序中为Apollo客户端添加标头

如何在React-Native应用程序中处理对Firebase的异步调用?

如何在React Native Android应用程序中实现Headless JS?

如何在React Native应用程序中获取带有标头的api(POST)

如何在React Native中衡量我的应用程序的数据使用情况?

如何在Expo React Native应用程序中检查互联网连接?

关闭应用程序后如何在React Native中实现推送通知

如何在React Native应用程序中访问联系人列表

如何在 React Native 应用程序中修改 expo android styles.xml

如何在React Native应用程序中动态更改标题标题文本?

如何在整个应用程序中打开 React Native 的 XMPP 连接(使用 xmpp.js)?

我们如何在React Native应用程序中设置.env?

如何在React Native应用程序中添加“设置为墙纸”选项

如何在React Native Android中打开应用程序设置页面?

如何在React-Native中从应用程序启动叠加窗口设置

如何在React-native中更改整个应用程序的主题?

如何在React-Native应用程序中删除位置权限?

如何在React Native中向应用程序根发出事件