关于react useState不能动态监听某一个属性变化的问题

幼儿园最帅yan

已于 2022-01-24 12:29:01 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js 前端 javascript

于 2022-01-21 15:30:11 首次发布

本文链接：https://blog.youkuaiyun.com/richpersion/article/details/122621472

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在React应用中使用ECharts时遇到的问题及解决方案：如何实现在动态展示数据的同时能够平滑地切换单位，通过改变内存地址来确保状态更新能够被正确监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求

1.使用echarts动态展示数据时可以动态的切换单位

我开始的实现思路是：
获取已经存放数据的option，将里面的数据一个一个取出来进行计算之后，重新放入option，以下是代码：

const [option,setOption] = useState({});
const series  = option.series.map(item =>{
          let temp = []
          item.data.map(item =>{
              let sum = i / value
              temp.push(temp)
              return item;
          })
        setOption({...option,series})

但是最后uesState并不能监听到option局部属性的变化，之后我又尝试了使用useRef去使用current获取当前的option，以下是React Developer Tools中option中的series中的数据，可以很明显的看到其中的data并没有实时更新，这个是因为和react的异步调用有关系，他是异步的，所以并不能实时的监听到动态的变化
在这里插入图片描述

解决办法：

之所以没有监听到变化，实际上就是因为没有动态的改变它的内存地址，所以他没有监听到变化，所以实现思路就是改变他的内存地址

  const totalResult = JSON.parse(JSON.stringify(option))

将原来的option转换成字符串，再将字符串转换成对象，以改变对象的方式去改变他的内存地址，这样就可以监听到他的动态变化，然后再对内部属性进行处理