数据初始化时为空,data.value报错的解决办法(验证)

一劳永逸解决第一次渲染为空渲染问题,方法头部判断后return null

 if (data.length == 0) {
    return null;
  }
或者array.isArray()

 

 

const AAA=useMemo(()=>{return },[data])//常用useMemo进行初始化赋值,再最小的损失下刷新组件

 

因为react页面渲染的时候会渲染两次,第一次时如果不给初始值则为null,一般都给数据初始值为[] 或null

此时如果页面代码有涉及到 data.数组里的键。 则会报错 

解决办法有:

常用:??  .?    ||[]       ||{} 等

其次:

数据初始化是一般都为[] (不论数据为什么类型,初始化时都是空数组),此时可以使用数组的方法array.length//0 

如果数据为对象集合,则可用(array.length)来判断是否渲染//如果为数组则可通过(array.length==0) //来判断

 const newData = useMemo(() => {
    console.log(active);
    return data?.[active] || [];
  }, [data, active]);

 

一种是使用map(),如果数组为空则map方法不会执行,所以内部调用value值也不会报错

map((item,index)=>{

return item.value

})
复制代码
 respTimeData.map((item, index) => {
      respSeriesData.push({
        name: item.name,
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        showSymbol: false,
        showAllSymbol: true,
        symbolSize: 0,
        symbol: 'circle',
        label: { show: false },
        itemStyle: {
          color: '#C830F2',
        },
        lineStyle: {
          width: 5,
        },
        data: item.value,
      });
    });
复制代码

另外一个办法是使用三原表达式或者if等判别语句进行判空,避开null或空的时刻

posted @   SimoonJia  阅读(415)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示