问答

React state更新的问题

作者:admin 2021-07-10 我要评论

页面中有一组Switch组件,默认全部开启,通过改变switchValue控制开关 开关数据从一个常量文件中导入的 export const stationStatusSwitch = [ { switchValue: t...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

页面中有一组Switch组件,默认全部开启,通过改变switchValue控制开关
image.png

开关数据从一个常量文件中导入的

export const stationStatusSwitch = [
    {
      switchValue: true, 
      id: 1
    },
    {
      switchValue: true, 
      id: 2
    },
    {
      switchValue: true, 
      id: 3
    },
    {
      switchValue: true, 
      id: 4
    },
    {
      switchValue: true, 
      id: 5
    },
    {
      switchValue: true, 
      id: 6
    },
    {
      switchValue: true, 
      id: 7
    }
  ]
  import { stationStatusSwitch } from "./constants";`
  constructor(props) {
    this.state = {
        stationStatusSwitch,
    }
  }

现在有个问题就是:如果把开关关闭也就是switchValue设为false然后再回到上个页面再重新进入这个页面,这个时候开关还是关闭的,switchValue的值还是false,在class外边打印stationStatusSwitch发现switchValue也是false。
这个就不明白了,回到上个页面再进入这个页面,state不应该被重置吗,我改变的是state为什么还是影响到导入的数组。如果我把stationStatusSwitch放到当前页面的state中就不会有这个问题,

###

按照题主描述,应该是navigation 切换screen 时 navigation使用的前面已经创建的路由栈中的页面,stack 中保留了上次页面的状态。
因题主描述信息不足,可以尝试下一下方法:

  1. 使用 navigation.push 跳转至此页面;
  2. 不要直接使用元数据(常量),请深拷贝一份
this.state = {
        stationStatusSwitch: depthCopy(stationStatusSwitch)// depthCopy 深拷贝需要题主自己实现下,
    }

原则上 使用navigation.push 应该能解决你的问题了,但是注意下返回不能再使用 goBack()

如果不能解决你的问题,请再提供以下信息:

  1. 出现问题平台,ios or Android
  2. 导航方式 navigation.navigate / push /replace
  3. 路由配置

另外 一楼在胡扯

###

应该是浏览器缓存了 HTML 的状态。
回到这个页面之后刷新一下,如果状态被重置了的话,就说明确实是被缓存了。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • elementUI表单Object.assign处理后无法

    elementUI表单Object.assign处理后无法

  • nacos作为配置中,有时可以加载到配置

    nacos作为配置中,有时可以加载到配置

  • font-spider压缩字体后,文件大小没有

    font-spider压缩字体后,文件大小没有

  • Vue SSR babel node_modules中的一个包

    Vue SSR babel node_modules中的一个包

腾讯云代理商
海外云服务器