React常规篇:判断一个变量是空数组/空对象,需要返回false的情况_react 判断数组为空_HaanLen的博客-CSDN博客
React常规篇:判断一个变量是空数组/空对象,需要返回false的情况
HaanLen
于 2021-10-23 12:06:20 发布
1380
收藏
分类专栏：
React全家桶系列
文章标签：
react.js
javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40119412/article/details/120919062
版权
React全家桶系列
专栏收录该内容
53 篇文章
10 订阅
订阅专栏
实际情况,请求网络接口时,当数据为空时,一般会返回空对象或者是空数组的情况,我们需要当数据是空数组/空对象时,做出一些逻辑处理
由于空数组/空对象的Boolean都是true,无法我们无法直接使用Boolean来判断.
让一个变量时空对象/空数组,能过返回一个false的解决办法:
针对数组
example1:利用数组长度的Boolean值来判断
useEffect(() => {
let arr = [1,4,5,6,7,7,8,8,];
let test = [];
console.log('打印空数组的长度', test.length, '长度的布尔值', Boolean(test.length));
console.log('打印非空数组的长度', arr.length, '长度的布尔值', Boolean(arr.length));
},[])
example2:根据数组的JSON字符串是否返回[];
useEffect(() => {
let arr: any[] = [1, 4, 5, 6, 7, 7, 8, 8,];
let test: any[] = [];
console.log('打印空数组', JSON.stringify(test) === '[]');
console.log('打印非空数组', JSON.stringify(arr) === '[]');
}, [])
针对对象
example1:根据对象的属性长度 example2:根据对象的JSON字符串是否返回{}
let empty = {};
let obj = {
name: 'lop',
age: 20
// 根据对象的属性长度
console.log('打印空对象的属性的长度', Object.keys(empty).length);
console.log('打印非空对象的属性的长度', Object.keys(obj).length);
// 根据对象的JSON字符串是否返回{}
console.log('打印空对象的JSON字符串', JSON.stringify(empty) === '{}');
console.log('打印非空对象的JSON字符串', JSON.stringify(obj) === '{}');
HaanLen
关注
关注
点赞
收藏
觉得还不错?
一键收藏
知道了
评论
React常规篇:判断一个变量是空数组/空对象,需要返回false的情况
实际情况,请求网络接口时,当数据为空时,一般会返回空对象或者是空数组的情况,我们需要当数据是空数组/空对象时,做出一些逻辑处理由于空数组/空对象的Boolean都是true,无法我们无法直接使用Boolean来判断.让一个变量时空对象/空数组,能过返回一个false的解决办法:针对数组example1:利用数组长度的Boolean值来判断 useEffect(() => { let arr = [1,4,5,6,7,7,8,8,]; let test = [];
复制链接
扫一扫
专栏目录
react-reactcssvariables一个用于设置CSS变量的React组件
08-15
react-css-variables一个用于设置CSS变量的React组件
【React全家桶入门之四】加入表单验证
热门推荐
一韬的React实验室
01-24
1万+
盲目信任用户输入的数据，会给系统埋下不小的隐患。这回我们就来把这隐患扼杀在摇篮之中。表单验证无非就是对用户输入的数据进行有效性、非空性验证，验证失败会在相应的地方显示错误信息，并阻止用户提交表单。
参与评论
您还未登录，请先
登录
后发表或查看评论
props传值类型_React基础(5)-React中组件的数据-props
weixin_39652810的博客
12-05
540
前言开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用将一个大的应用按照功能结构等划分成若干个部分(组件),对每个部分(组件)进行分开管理,与组件相关的东西放在一起,达到高内聚的目的,而不同组件又各自独立管理达到低耦合的效果。构建组件,本质上就是在编写javascript函数,而组件中最重要的是数据,在React中数据...
react.js判断输入内容是否为空
WebView
07-30
3064
1、判断输入内容是否为空有很多方法
2、这里分享自己的有效代码
3、
去掉换行符、去掉空格等还是为空的话
if (textContent.replace(/(^\s*)|(\s*$)/g, '').replace(/[\r\n]/g, '') === '') {
Toast.offline('内容不能为空', 1);
return;
...
react-search-autocomplete:一个搜索框，用于过滤提供的对象数组
05-12
<ReactSearchAutocomplete>
<ReactSearchAutocomplete>是一个完全可自定义的搜索框，用户可以在其中键入文本并过滤结果。 它依靠进行模糊搜索。 查看他们的网站以查看选项（您可以将它们传递给此组件）。
5.2.0
添加了onClear道具，当用户清除搜索框时会调用该道具
添加了inputSearchString ，该inputSearchString允许在输入框中设置搜索字符串
5.1.0
添加了onHover ，可返回用户悬停的结果
添加了clearIcon道具以在搜索框中显示一个清晰的图标
现在，如果默认值不是最佳值，则可以使用样式设置工具来设置搜索图标和清除图标边距的样式：
styling = { {
searchIconMargin : "10px 12px 0 11px" ,
clearIconMar
react中的JS判断对象是否为空对象的几种方法
非一般的小白的博客
08-28
4723
在使用react的时候,props中的值通常作为对象在父组件和子组件之间进行进行传递,通常会牵扯到判断对象是否为空的情况,今天遇到,特意来记录下方便以后回顾.
一：使用JSON的内置对象方法JSON.stringify()
const obj = {} ;
JSON.stringify(obj) === '{}' ;
方法返回值： boolean
二：使用ES6的方法Object.getOw...
获取对象的属性，并且判断对象属性是否存在
马优晨
11-26
2571
（1）获取对象的属性，并且判断对象属性是否存在
举例：
let test = {name:’22’,age:67,sex:’man’}; 获取age属性值；
简单写法：
if(test && test.age ){
console.log(test.age);
优化写法：
let test = {name:’22’,age:67,sex:’man’};
console.log(test && test.age); // 直接获取age的值；
（2）引入图片（图
如何判断一个数组和对象为空？
boysky0015的博客
03-03
1891
数组一般用数组的长度可以判断
如果是对象呢？有如下方法：
1.把对象转化为字符串
JSON.stringify();
然后通过判断长度。
let obj = {a:1};
let res = JSON.stringify(obj);
console.log(res === '{}'); //说明是空对象
2.遍历
let obj = {};
function each(obj) {
f...
对象，集合， 字符串，进行判空或者判null的方法总结
Tomcat_93的博客
06-29
531
对象(Objects)，集合(CollectionUtils MapUtils)， 字符串(StringUtils)，进行判空或者判null的方法总结
react大括号的用法
weixin_54219288的博客
10-04
1090
react引入花括号{}
react-flo:React-Flo是一个基于React的可视化节点图编辑器
05-17
React浮动
React-Flo是一个基于React的可视化节点图编辑器
准备
节点JS https://nodejs.org/en/download/
Webpack NPM npm install --global webpack
克隆此存储库$ https://github.com/HydroCarbons/react-flo.git
切换到项目* cd react-flo
安装Depedencies * npm install
开发环境
开始
npm start
在您的浏览器中运行的应用
http://localhost:8081
单击“文件>>”，然后将“ ”的内容发布到“内容”输入框中，然后单击“上传”进行渲染在Flo。
生产环境
建立建立
npm run build
成功完成后，将使用应用程序文件创建“ dist”文件夹。
1. bundle.js
react-env:React应用程序的运行时环境变量
04-06
React Env-运行时环境配置
从填充您的环境.env文件在运行时，而不是构建时。
同构-服务器和浏览器兼容。
支持静态网站生成。
支持多个.env文件。
自述文件
例子
使用示例（请参阅README.md）
使用示例（请参阅README.md）
入门
该软件包从多个.env文件生成一个__ENV.js文件， .env文件包含白名单列出的环境变量，这些环境变量具有REACT_APP_介词。
在浏览器中，您的变量将在window.__ENV.REACT_APP_FOO和服务器process.env.REACT_APP_FOO上可用。 我们提供了一个辅助函数，使检索值变得更加容易：
# .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE=
RxState::pill:将任何对象或数组变成React式存储
04-30
接收状态
将任何对象或数组变成React式存储
像这样使用它：
import { rxStore , rxLogger } from 'rxstatestore'
// init store with seed state
// actions take manipulation params
// reducers are passed state at time of invocation
// the reducer is expected to return new state post manipulation
const Counter = rxStore ( 0 , {
increment : ( amount = 1 ) => count => count + amount ,
decrement : ( amount = 1 ) => count => coun
react-nil:react一个React为空的渲染器
03-16
这没东西看 ...
这么。 这个包允许您将Reacts高层组件抽象带到Node或任何您需要的地方。 为什么不管理REST端点（如客户端上的路由，用户作为具有安装/卸载生命周期，独立的关注点分离和干净的副作用的组件）进行管理。 暂停请求等
您可以在此处尝试一个小型演示： :
它是如何工作的？
import React , { useState , useEffect } from "react"
import { render } from "react-nil"
function Foo ( ) {
const [ active , set ] = useState ( false )
useEffect ( ( ) => void setInterval ( ( ) => set ( ( a ) => ! a ) , 1000 ) , [ ] )
console .
React_Todos:React这是一个内置的Todo应用程序
05-02
在Shell中添加临时环境变量 在.env添加开发环境变量 我可以使用装饰器吗？ 使用AJAX请求获取数据 与API后端集成 节点 Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置...
React Native 使用Image标签是对uri进行判空
koufulong的博客
09-28
1203
判断对象不为空的方法：
/*判断对象为空*/
isEmpty(obj){
if(typeof (obj) != 'number' &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; (!obj || obj == null || obj == ' ' || obj == undefined || typeof (obj) == 'undefined')){
return tru...
react网络请求数据初始为空影响页面渲染的解决
m0_46313328的博客
07-21
1297
发送网络请求获取的数据，初始是空的
useEffect(() => {
dispatch({
type:'data/fetchData',
payload:null
})
},[])
如做Table表格，直接把数据赋给dataSource，组件渲染比较快，此时渲染的数据是空的，直接报错
<Table dataSource={data.list} columns={columns} />
可先对数据进行判断，数据不为空时赋数据值，否则先给dat
如何检查对象是否为数组？
p15097962069的博客
12-27
195
我正在尝试编写一个接受字符串列表或单个字符串的函数。 如果是字符串，那么我想将其转换为仅包含一项的数组。 然后，我可以循环浏览它而不必担心错误。
那么，如何检查变量是否为数组？
react判断对象不为空
qq_53768302的博客
11-12
1355
使用类组件
实现依据：对象target的初始状态status为null，status不为空时向后台传值。
代码：
import React from 'react'
class Two extends React.Component {
constructor(props) {
super(props);
this.state = {
target:{
status: null //状态初始值
react在调用子组件方法到jsx模板中一直返回是true，但是我设置了判断有返回true或false
最新发布
02-07
在 React 中，你可以在子组件中定义一个方法，然后在父组件中调用这个方法。举个例子：
```
// 定义子组件
class MyChildComponent extends React.Component {
myMethod() {
// 这里是 myMethod 的代码
render() {
return <div>这是子组件</div>;
// 在父组件中调用子组件的方法
class MyParentComponent extends React.Component {
render() {
return (
<div>
这是父组件
<MyChildComponent ref={(child) => { this.child = child; }} />
</div>
);
componentDidMount() {
this.child.myMethod();
```
但是，在你的 JSX 模板中调用子组件的方法是不可以的。JSX 模板只是用来描述组件的外观的，并不能执行代码。如果你想要在 JSX 模板中执行代码，你可以使用 JavaScript 表达式，比如：
```
<div>{this.state.showMessage ? '消息已显示' : '消息未显示'}</div>
```
在这个例子中，如果 `this.state.showMessage` 的值为 `true`，就会显示 `'消息已显示'`；否则会显示 `'消息未显示'`。
如果你的子组件方法返回的是 `true` 或 `false`，你可以在父组件中调用这个方法，然后将结果存到父组件的状态中，然后在 JSX 模板中使用这个状态。
希望这能帮到你！
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
HaanLen
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
420
原创
6487
周排名
3155
总排名
48万+
访问
等级
6797
积分
195
粉丝
238
获赞
129
评论
1341
收藏
私信
关注
热门文章
vue中@click绑定多个事件
20654
设计算法，把十进制整数转换为二至九进制之间的任一进制输出。
11504
学生信息保存到文件中（JAVA）
11497
Mongodb:安装教程
9632
冒泡排序：成绩从低到高排序（JAVA）
8680
分类专栏
vue源码解析
7篇
Umi框架
7篇
React全家桶系列
53篇
踩坑记
44篇
八股文
3篇
JavaScript算法与数据结构
20篇
Chrome与HTTP
13篇
JavaScript设计模式与设计原则
7篇
JavaScript案例
11篇
JavaScript-ECMAscript
28篇
JavaScript DOM
2篇
JavaScript BOM
8篇
Echart
27篇
微信小程序
16篇
Vue全家桶
35篇
Nginx
1篇
Vue3.0
10篇
前端工具
2篇
ES6+
1篇
Node
30篇
Mongodb
5篇
uni-app
2篇
数据库
2篇
编程题
6篇
TypeScript
2篇
Git
9篇
Ajax
2篇
Three.js
2篇
Webpack
1篇
SVN
2篇
HTML5
23篇
CSS动画
jQuery
8篇
CSS/CSS3
12篇
Java
7篇
JSP
11篇
数据结构（c++）
5篇
Android
14篇
最新评论
nuxt项目使用axios(vue2)
大山里的菜籽儿:
解决了吗？我也遇到了这个
React路由篇:路由跳转以及带参的三种方式(react-router-dom声明式路由)
HaanLen:
看下是因为will component里面拿不到吗？
React路由篇:路由跳转以及带参的三种方式(react-router-dom声明式路由)
啊黑啊:
TypeError: Cannot read properties of undefined (reading 'state') 子页面接收不到是什么原因？
父组件 <Link to={{
pathname:'/ActiveDetail',
state:{title:item.title,date:item.date,txt:item.txt},
}}>
<div className="news-title">{item.title}</div>
</Link>
子组件： componentWillMount(){
//console.log(this.props.location)//传递过来的所有参数
console.log(this.props.location.state+'ss/ss')
android:设计一个具有3个选项的菜单程序，当单击每个选项时分别跳转到3个不同的页面。
奶油糖星人:
能用，吧strings.xml删了，自己手动写。点右上角可以切换页面
计算机网络笔记：HTTP状态码
programmer_ada:
哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)增加条理清晰的目录；(2)使用更多的站内链接；(3)使用标准目录。
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
react项目和node项目使用socket.io进行连接发送信息
react项目使用@antv/l7实现展示地图可视化
egg项目：更新数据
2023
05月
23篇
04月
29篇
03月
9篇
02月
2篇
01月
2篇
2022年121篇
2021年27篇
2020年145篇
2019年56篇
2018年8篇
2017年12篇
目录
目录
分类专栏
vue源码解析
7篇
Umi框架
7篇
React全家桶系列
53篇
踩坑记
44篇
八股文
3篇
JavaScript算法与数据结构
20篇
Chrome与HTTP
13篇
JavaScript设计模式与设计原则
7篇
JavaScript案例
11篇
JavaScript-ECMAscript
28篇
JavaScript DOM
2篇
JavaScript BOM
8篇
Echart
27篇
微信小程序
16篇
Vue全家桶
35篇
Nginx
1篇
Vue3.0
10篇
前端工具
2篇
ES6+
1篇
Node
30篇
Mongodb
5篇
uni-app
2篇
数据库
2篇
编程题
6篇
TypeScript
2篇
Git
9篇
Ajax
2篇
Three.js
2篇
Webpack
1篇
SVN
2篇
HTML5
23篇
CSS动画
jQuery
8篇
CSS/CSS3
12篇
Java
7篇
JSP
11篇
数据结构（c++）
5篇
Android
14篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值