react vue开发赋值小技巧-短路

最新推荐文章于 2022-05-30 08:57:48 发布
最新推荐文章于 2022-05-30 08:57:48 发布
阅读量310 收藏
点赞数
分类专栏： react 代码风格 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyubababa/article/details/124184876
版权
本文介绍了一种使用短路逻辑优化代码的方法，特别是在处理后端返回可能为null或undefined的数据时，使代码更简洁。示例中展示了如何在设置表单字段值时，确保即使数据为空也能够正确赋值，提高代码可读性。
摘要由CSDN通过智能技术生成

当我们在回显数据的时候，后端返回的值可能是null undefined 或者"（js 6个为false 的值）；这时采用下面的写法，巧妙用短路逻辑， 让代码看起来更简洁。
含义为：如果有值 即 赋值；无值 即 赋值为[]

  form.setFieldsValue({
                        'Title': data.Title,
                        'TitleCN': data.TitleCN,
                        'ApprovalManager': data.ApprovalManager,
                        'ApprovalRequired': data.ApprovalRequired,
                        'CPDHours': data.CPDHours,
                        'CancelApply': data.CancelApply,
                        'Category': data.Category,
                        'ClassAmount': data.ClassAmount,
                        'ContentContactorEmail': data.ContentContactorName ? `${data.ContentContactorName}(${data.ContentContactorEmail})` : null,
                        'ContentContactorName': data.ContentContactorName ? data.ContentContactorName : null,
                        'LogisticsContactorEmail': data.LogisticsContactorName ? `${data.LogisticsContactorName}(${data.LogisticsContactorEmail})` : null,
                        'LogisticsContactorName': data.LogisticsContactorName ? data.LogisticsContactorName : null,
                        'CourseCode': data.CourseCode,
                        'CourseLink': data.CourseLink,
                        'Description': data.Description,
                        'DescriptionCN': data.DescriptionCN,
                        'RoomSetting': data.RoomSetting,
                        'DayReminder': data.DayReminder,
                        'TargetDays': data.TargetDays,
                        'RoomRemark': data.RoomRemark,
                        'EquipmentRequest': data.EquipmentRequest || [],
                        'FacilityRequest': data.FacilityRequest || [],
                        'StartDate': moment(data.StartDate, 'YYYY-MM-DD'),
                        'EndDate': moment(data.EndDate, 'YYYY-MM-DD'),
                        // 'FacilityRequest':data.FacilityRequest,
                        'FunctionOrganizer': data.FunctionOrganizer,
                        'LearnHours': data.LearnHours,
                        'PreworkRequired': data.PreworkRequired,
                        'InPerson': data.InPerson,
                        'ProgramManager': data.ProgramManager,
                        'SubCategory': data.SubCategory,
                        'SubTitle': data.SubTitle,
                        'WBSCode': data.WBSCode,
                        'TimesheetCode': data.TimesheetCode,
                        'AllowDrop': String(data.AllowDrop),
                        'TargetDept': data.TargetDept || [],
                        'TargetFunction': data.TargetFunction || [],
                        'TargetLevel': data.TargetLevel || [],
                        'TargetNonManDept': data.TargetNonManDept || [],
                        'TargetNonManFunction': data.TargetNonManFunction || [],
                        'TargetNonManLevel': data.TargetNonManLevel || [],
                        // TODO:回显设置！！！
                        TargetStaffLevel:data.TargetStaffLevel||[]
                    })

写法2：可读性高一点点， 但不好看
 'TargetNonManLevel': data.TargetNonManLevel?data.TargetNonManLevel: [],

data.TargetNonManLevel中有值吗？ 为true吗？ true 赋值，否则 赋值[]

zhangyubababa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-react-vue-spa-awesome-config:极速、零配置的 web 应用打包工具, 同时支持 react 和 vue 的单页面应用,提供开箱即用支持 Fast, zero-configuration web application packaging tool that supports both single-page applications for react and vue, out-of-the-box support， 基于 webpack4.x,同时支持 re
05-05
webpack-react-vue-spa-awesome-config webpack-react-vue-spa-awesome-config 是一个命令行工具，也可以下载本软件包，自定义 webpack 配置，启动示例 极速、零配置的 web 应用打包工具, 同时支持 react 和 vue 的...
将React组件转换为Vue组件。-JavaScript开发
05-26
vue的安装纱线添加@ egoist / react-to-vue用法import从'vue'导入Vue从'react'导入React从'@ egoist / react-to-vue'导入toVue const ReactComponent =（）=> { const [count react-to-vue安装纱线添加@ egoist / ...
VUE 短路表达式
weixin_40089510的博客
03-07 804
在正常情况下，&& 全真才真、一假则假。|| 全假则假，一真则真。 但是今天要说的是短路表达式。 this.autologin && （this.rememb=true） 如果this.autologin 是真，则执行（this.rememb=true） 如果this.autologin是假，则返回执行this.autologin的执行结果。 this.reme...
React开发的小技巧
weixin_34023863的博客
09-17 499
1、短路写法代替if // 通过判断值是否存在来控制元素是否显示 // 一般三目运算可以达到此效果，部分可以用短路写法代替 // 用!!将其转为boolean避免坑 const flag = 0; !!flag && <div></div> 2、使用es6新特性传递组件props const {da...
vue的模板语法
mengqiu123的博客
08-24 139
双大括号语法书写形式： <div id="app"> <p>{{ str }} </p><!--str --> <p>{{ num }} </p><!--100 --> <p>{{ bool?'true':'false' }} </p><!--true --> <p&gt...
短路表达式总结
咕咚在否的博客
03-03 1094
1. 逻辑与 &amp;&amp; //返回第一个假值，或者最后一个真值 1 &amp;&amp; ‘’//‘’ Boolean('')//false 1 &amp;&amp; true &amp;&amp; 'gx' &amp;&amp; 0 &amp;&amp; 66//0 1 &amp;&amp; true &amp;&a...
vue中动态获取变量名并赋值
周家大小姐
04-29 4490
需求根据vuex返回的数据,动态针对每个data中指定的变量改为true但如果一个个if去手写就太麻烦了;所以前缀相同尾部为I做为结束方便使用 效果: data () { return { video0: '', video1: '', video2: '', video3: '', video4: '', video5: '' } }, cuVal..
react-vue：在React和React Native中运行Vue
02-05
React-Vue React-Vue旨在连接React和Vue。 这可以帮助您在React中运行Vue。 有三种用途。 将Vue的用于观察者React组件使用在React应用中运行Vue组件使用在React Native中运行Vue组件React系统由于Vue清晰的分层设计...
babel-plugin-transform-react-to-vue：将React组件转换为Vue组件（测试版）
01-30
yarn add babel-plugin-transform-react-to-vue --dev 用法 { "plugins" : [ "transform-react-to-vue" ] } 注意：如果您希望它与实验性ECMAScript功能（如class-properties ）一起使用，请将该插件与babel-plugin...
vue-reactflow:在 Vue.js 应用程序中渲染 React 组件的实验
08-04
这是一个演示项目，用于展示在 Vue.js 应用程序中使用的 React 组件 。 在 Vue 中使用 React 绝对是一种反模式，但有时可能需要使用它。 在这种情况下，我尝试在 Vue 应用程序中组合一个子 React 类组件。 不幸的...
【Vue3】使用reactive包裹数组赋值
Jessieeeeeee的博客
01-17 6359
需求 将接口请求到的列表数据赋值给响应数据arr 代码 const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败，直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr.concat(res); // 方法3 可以，但是很麻烦 res.forEach(e => { arr.push(e);
Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)
大灰狼的小绵羊哥哥的博客
05-30 654
简介 Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。 今天我们通过对比的方式来学习Vue和React的组件传值这一部分。 本文首先讲述Vue2、Vue3、React的组件传值方式，然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结了Vue和React在组件传值这部分的相同点和不同点。 希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。 Vue2 Vue2 组件通信共有12种 props $emit /
2021-09-13
weixin_42649868的博客
09-13 97
vue + tsx得一些问题 v-if v-model v-for v-on v-if 通过逻辑短路实现： a && <div>{{'123'}}</div> v-model 如输入框的绑定： <el-input value={this.aa} onInput={(val) => { this.aa = val }}></el-input> v-bind 动态绑定的变量： <el-form model={this.
前端之vue模板
weixin_46372074的博客
04-25 5825
vue模板初始VueVue实例模板语法1.vue指令：2.插值语法 初始Vue 初识Vue: 1,想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象; 2,root容器里的代码依然符合html规范，贝不过混入了一些特殊的Vue语法; 3,root容器里的代码被称为[Vue模板]，template。 Vue实例 el为Vue实例选择容器 一个Vue实例只能接管一个容器，反之亦然。即，只能一一对应。 数据改变，页面会自动更新 Vue实例内包含的el用于指定当前Vue实例容器服务的容器，值通常是css
React.js中常用的ES6写法总结
NeverSayNever
04-27 603
转自：https://blog.csdn.net/haoshidai/article/details/52244620一 模块1 引入模块以便使用用import实现：import '模块文件地址' import 组件 from '模块文件地址'2 导出模块用export default实现：export default class MyComponent extends Component{ ...
react模式（上）
qq_28666545的博客
02-27 505
react模式（模式的定义，我认为是类似于一种规范，一种方法，你可以用其他的方法去实现，但这些是已有的，总结的，相对使用可靠方便的方法） 借鉴于在网上的react模式，我觉得按照模式编程会事半功倍，因此总结如下： ### 函数组件 (Function component) 函数组件 是最简单的一种声明可复用组件的方法 他们就是一些简单的函数。 ```jsx function Greeting...
JS中短路运算符&&和||
热门推荐
安静的对折的专栏
09-01 2万+
在JS函数中我们经常会使用到短路运算符，主要是逻辑与（&&） 和 逻辑或（||） 1、逻辑与 && 的运算方式 var a = 5 && 6; console.log(a); //返回的结果为 6 如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。 var a = false && 6; console.log(a); //返
js中的短路运算符 【 || , && 】
m0_55557411的博客
04-06 3140
js中的短路运算符 【 || , && 】
js中的逻辑短路在项目中使用
业余前端的职业经历
04-11 751
前几天朋友在做vue项目中的时候,问了我一个问题 大概就是 一个数组中 [1,2,3,4,5,6,7]; 用v-show控制元素渲染 除了 1和2之外 其他的元素正常渲染 然后就卡卡的写了 // 我只是用数据和例子模拟以下 <div v-show="type！=1||type!=2">hello world</div> 乍一看没毛病是吧 然后就问我 这个不行啊 我输入2的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值