项目中处理后端返回多数据值, 数组形式展示tab 列表上

最新推荐文章于 2024-01-02 16:52:50 发布

小刘先生很努力

最新推荐文章于 2024-01-02 16:52:50 发布

阅读量855

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lzfengquan/article/details/120551048

版权

本文探讨了在前端开发中如何根据后端返回的数据解析并展示在Tab列表上，重点在于利用JavaScript的?.操作符和some()方法进行数据过滤与判断。当数据字段有误时，可能导致无法正确展示。示例代码展示了处理包含null和undefined值的数组方法，并给出了过滤这些值的实例。

摘要由CSDN通过智能技术生成

看一下下图展示，其实就是考虑多种情况，根据后端返回的数据中解析并展示在tab 列表上
不过注意的是一定要注意字段。可能不经意错了一个字母都不能展示，我就这样错了。
在这里插入图片描述
上代码
在下列代码中，我用了 ?. 和 some判断，因为我要判断是否有长度和返回的值是不是空值
some()方法，遍历数组的每一项，若其中一项为 true，则返回true；
every()方法，遍历数组每一项，若全部为true，则返回true；

这个是别人的总结的常用的方法比较简单易懂 https://www.cnblogs.com/Mr-Rshare/p/9008698.html

{
      title: '发票号码',
      align: 'center',
      dataIndex: 'invNo',
      key: 'invNo',
      render: (value, rows) =>{
        if( rows.invNo?.length > 0 ){
          if(rows.invNo?.some(item => !(item == null))){
            return (
              <>
                {rows.invNo.map((itemInvNo, index) => (
                  <Tag color="blue" key={index}>
                    {itemInvNo}
                  </Tag>
                ))}
              </>
            )
          }
        }else {
          if(rows.invNo == null || rows.invNo == [] ){
            return ''
          } else{
             return '暂无信息'
          }
        }
      }
    },

当然我们也可以过滤 null和你define的

  过滤 null 和 undefined
/假设有返回值 [1,2,3, null, undefined, 4, null];
写个例子
const str =  [1,2,3, null, undefined, 4, null];
const target =  str.filter(current => {
return current !== null && current !== undefined;
})	
console.log(target) // [1, 2, 3, 4]  过滤生效