computed中数据还没获取到时报Cannot read property ‘filter‘ of undefined“

已于 2022-11-05 22:08:18 修改
阅读量2.5k 收藏 1
点赞数 1
文章标签： vue
于 2021-07-14 19:29:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46340177/article/details/118735304
版权

记一次错误的解决方案。

 在对数组进行遍历时，我需要对后台返给我的json串进行数据过滤再遍历。但是，再computed中过滤时，虽然可以过滤出数据，但是控制台报错。

 

此时，我怀疑是数据还没有从后台接口取到就开始渲染了所以报错，请教了下朋友，改了下就可以了。

 第一行是从this.data里面 dadaOrderResultList  如果不存在dadaOrderResultList 那么定义dadaOrderResultList 的初始值为[] ，(dadaOrderResultList || []) 这个是处理 如果 dadaOrderResultList为null 时  使用[]执行filter

其实简单说就是加一个默认值，因为后台接口返回值是异步的，当代码执行时还没有获得返回值，这样我们需要手动给它加一个默认值

完美解决！

小艺喵喵酱
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决nodejs使用apidoc问题：Cannot read property 'Filter...' of undefined
sweetyi的专栏
01-15 2208
解决nodejs中使用apidoc遇到的问题：Cannot read property 'Filter...' of undefined。 在这里可以找到apidoc使用简体中文的正确打开方式，有代码为证
antd报错Cannot read property 'filter' of undefined的解决方法
weixin_34195546的博客
08-14 5509
技术栈： react + dva + antd 问题描述： 在状态组件中书写state下的columns,其中涉及点击某处出现弹框modal的操作，在modal中有select选框，点击取消或X清空所有表单信息。起初是将setFields的方法写在了取消按钮上，清空表单信息是有效的，但是再次打开弹窗，里面的表单还保持着无法选择的状态。点...
TypeError: Cannot read property ‘filter‘ of undefined
wananQ的博客
03-20 226
问题如何解决有无大佬帮忙看一下。
create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined
qq_36400206的博客
11-14 1086
create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined 多入口配置 一.首先eject项目 执行npx create-react-app train-ticket,安装react项目。这时候package.json中react-srcipt已经集成了所有的逻辑，此时需要个性化的配置，需要执行npm ru...
2020 React 创建MPA多页面代码框架。顺便解决 Cannot read property ‘filter’ of undefined问题
亨利王的博客
07-31 1495
这里写自定义目录标题第一步 建立代码框架1、npx create-react-app train-green2、npm run eject3、npm start，确保正常运行4、安装必要的包5、拷贝index.html,到同目录下，重命名，修改title标签内容，以示区别6、删掉src目录下除 serviceWork.js之外文件7、在src下新建 index目录，在目录下建7个文件，依次是8、编写index.js内容框架9、编写App.jsx10、编写reducers.js11、编写store.js12、
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
10-15
如果在`created`中发起数据请求，并尝试在模板中直接访问这些数据，由于数据尚未填充到`data`对象中，因此访问的数据字段会是`undefined`。 例如，你的代码可能如下所示： ```javascript data() { return { ...
vue中watch和computed为什么能监听到数据的改变以及不同之处
10-15
主要介绍了vue中watch和computed为什么能监听到数据的改变以及不同之处,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 中 filter 与 computed 的区别与用法解析
10-15
在Vue中，`filter` 和 `computed` 都是用来处理数据的，但它们有着不同的应用场景和工作原理。 1. **触发时机** - **Computed Properties**：计算属性在依赖的数据发生变化时才会重新计算，Vue会跟踪其依赖关系，...
vue 解决computed修改data数据的问题
10-16
这里我们将深入探讨如何在Vue中正确处理 `computed` 修改 `data` 数据的问题。 首先，我们要明确一个概念：`computed` 是只读的，它不应该直接修改 `data` 中的属性。当尝试在 `computed` 函数内部修改 `data` 的值...
react 多页应用编译失败 Cannot read property ‘filter‘ of undefined 解决方案
缚己
05-01 1330
经过修改 webpack 的 entry 及 HtmlWebpackPlugin 等配置后，出现如下报错： 这是因为将 webpack 的 entry 将原来的数组方式修改为了对象，自然没有 filter 方法。 解决方法 修改 entrypoints.main 中的 main 为你在 entry 中配置的项目首页的 key。我的 entry 配置中首页的 key 为 index ，因此可改为 entrypoints.index。 ...
react脚手架配置多编译入口TypeError：Cannot read property 'filter' of undefined
KangTongShun的博客
02-18 3624
最近由于项目需要，需要配置多入口编译，也就是一个html对应一个js入口所以就去网上搜，大概都是这么个步骤 首先创建项目 $ create-react-app myapp 然后执行npm run eject 可以将webpack的配置文件暴露出来 ，然后修改webpack的配置文件 入口改为多个。 这就是大致步骤 但是！！ 我就是配置不成功， 配置了入口 entry:{ index:'....
antd ＜a-form＞中 使用component，组件变动后，绑定出现异常 Cannot read property ‘filter‘ of undefined，v-decorator无法正确绑定
草莓Sir的博客
01-29 1832
antd from中 使用component，组件变动后，绑定出现异常 Cannot read property ‘filter’ of undefined，v-decorator无法正确绑定 问题描述 在使用 组件时，需要根据下来选择来展示不同的组件；但是不同的组件在切换的时候，其赋值回调渲染 form的时候，出现了异常 Cannot read property ‘filter’ of undefined ； 并且组件的v-decorator ，无法正确的绑定 根据红框1的下拉选择，来切换红框2的组件
React配置webpack多页应用打包失败,报错Cannot read property ‘filter’ of undefined解决方案
bidang3275的博客
06-02 873
React多页配置，Cannot read property ‘filter’ of undefined错误分析配置好react多页应用后，yarn build打包运行, 控制台报错错误定位错误分析1. 打印 `entrypoints` 对象2. 为什么会没有 `main` 属性原来的`entry`属性修改后的 `entry` 属性错误原因解决方法 配置好react多页应用后，yarn build打包运行, 控制台报错 yarn build node scripts/build.js Creating an
Custom filter giving “Cannot read property 'slice' of undefined” in AngularJS
snowstorm的博客
06-21 3598
自定义angularjs 过滤器，用于选择一个数组的一部分，使用了数组的slice（）方法，但是会报错：“Cannot read property  ‘slice’ of undefined”，可以这样解决： app.filter('startFrom', function() { return function(input, start) { if (!input ||
vue中的过滤器filter报错:Error in render: “TypeError: Cannot read property ‘filter‘ of
zhouchuanlun的博客
08-13 1280
今天在学习vue的时候报错：Error in render: "TypeError: Cannot read property ‘filter’ of；我以为过滤器里面必须得有值，但是加上了，还是报错： 购物车 课程： 价钱： ...
在VUE中使用过滤器(Filters)报[Vue warn]: Error in render: “TypeError: Cannot read property ‘toFixed‘ of ...
weixin_58215548的博客
11-09 1217
在VUE中使用过滤器(Filters)报[Vue warn]: Error in render: “TypeError: Cannot read property ‘toFixed‘ of ...
一次排查服务器端接口报500错误的经历
weixin_34235135的博客
10-15 1778
　　1 出现问题情景　　该问题来自我实习期间完成的一个博客后端系统，具体如下：　　· 当我辛辛苦苦在编辑器里完成文章格式修改(字数较多，一般大于3000字;字数较少时不会出现问题)，以及相关目录和标签的选定，点击提交按钮打算提交到博客系统时发现：文章无法提交成功。或者修改文章，重新编辑文章时(PS：编辑后，字数较多，一般大于3000字)，提交文章也出现类似问题。　　然后，查看接口调用返回值发现：　...
Vue2 Element 在computed里设置表单校验规则
白瑕 的博客
08-14 3564
思路是正确的…用计算属性将校验规则返回, 按照我的记忆.但是刚开始就是不行, 即便返回完全一样的东西让prop属性完全相同, 校验并不生效, 我觉得应该是会对校验规则对象进行一个检验, 只会使用绑定在表单上的校验规则对象上的校验规则.但是我就没想到, 我就不能直接把整个rules校验对象都放computed里吗?我怎么就非要一条一条的放然后分别返回呢…提示：以下是本篇文章正文内容，下面案例可供参考前天刚看见过, 我记得挺简单的, 今天突然想不起来了....
uniapp中 Cannot read property 'state' of undefined
最新发布
05-01
这个错误通常出现在使用 Vuex 状态管理库时，某个组件中访问了一个没有被声明的 state。你需要检查以下几个方面： 1. 确认你在组件中正确引入了 Vuex，可以在组件的 `<script>` 标签中添加以下代码： ```javascript import { mapState } from 'vuex' ``` 2. 确认你已经在 Vuex 的 store 中声明了对应的 state。在 store.js 文件中添加以下代码： ```javascript const store = new Vuex.Store({ state: { myState: '' } }) ``` 3. 确认你在组件中正确使用了 mapState 方法来映射 state。例如： ```javascript export default { computed: { ...mapState({ myState: state => state.myState }) } } ``` 如果以上三个方面都没有问题，那么可能是组件中的某个代码块在访问 state 之前被执行了，导致 state 还没有被初始化。你可以在组件的生命周期函数中调用 action 来初始化 state。例如： ```javascript export default { created () { this.$store.dispatch('initState') } } ``` 在 store.js 文件中添加以下代码： ```javascript const store = new Vuex.Store({ state: { myState: '' }, actions: { initState ({ commit }) { commit('setMyState', 'initial value') } }, mutations: { setMyState (state, value) { state.myState = value } } }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值