[英]Invalid attempt to destructure non-iterable instance
I already asked the question but I think the title was wrong.我已经问过这个问题,但我认为标题是错误的。
I am new to VueJs and using vue-aplayer to play audio files on my site.我是 VueJs 的新手,使用vue-aplayer在我的网站上播放音频文件。 The player requires svg icons that are in the assets folder but I am getting error while running it.
播放器需要资产文件夹中的 svg 图标,但运行时出现错误。
const requireAssets = require.context('../assets', false, /\.svg$/)
console.log(requireAssets.keys())
const SVGs = requireAssets.keys().reduce((svgs, path) => {
const inlineSvg = requireAssets(path)
const [raw, viewBox, d] = inlineSvg.match(/^<svg.+?viewBox="(.+?)".*><path.+?d="(.+?)".*><\/path><\/svg>$/)
svgs[path.match(/^.*\/(.+?)\.svg$/)[1]] = {
viewBox,
d
}
return svgs
}, {})
The error it displays is它显示的错误是
app.js:6489 Uncaught TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
at _nonIterableRest (app.js:6489)
at _slicedToArray (app.js:6487)
at app.js:6514
at Array.reduce (<anonymous>)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue-aplayer/components/aplayer-icon.vue?vue&type=script&lang=js&
I logged the requireAssets and it is getting the values like我记录了requireAssets,它得到了像
0: "./loading.svg"
1: "./lrc.svg"
2: "./menu.svg"
3: "./no-repeat.svg"
I tried using keys.map() and Object.keys(requireAssets).map but nothing came close to solution.我尝试使用 keys.map() 和 Object.keys(requireAssets).map 但没有什么能接近解决方案。 If I comment the icon import code, the players loads fine but without icons.
如果我评论图标导入代码,播放器加载正常但没有图标。
Full page code:整页代码:
<template>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" :viewBox="svg.viewBox" width="100%"
:style="style">
<use xlink:href="#aplayer-${type}"></use>
<path class="aplayer-fill" :d="svg.d"></path>
</svg>
</template>
<script>
const requireAssets = require.context('../assets/', false, /\.svg$/)
// console.log(requireAssets.keys())
console.log(requireAssets.keys())
const SVGs = requireAssets.keys().reduce((svgs, path) => {
const inlineSvg = requireAssets(path)
const svgMatches = inlineSvg.match(/^<svg.+?viewBox="(.+?)".*><path.+?d="(.+?)".*><\/path><\/svg>$/)
if(!svgMatches) return [];
const [raw, viewBox, d] = svgMatches
svgs[path.match(/^.*\/(.+?)\.svg$/)[1]] = {
viewBox,
d
}
return svgs
}, {})
export default {
props: ['type'],
computed: {
svg () {
let icon = this.type
if (this.type === 'prev' || this.type === 'next') {
icon = 'skip'
}
return SVGs[this.type] || {}
},
style () {
if (this.type === 'next') {
return {
transform: 'rotate(180deg)',
}
}
}
}
}
</script>
Your regex will return null
if it can't match a svg syntax.如果您的正则表达式与 svg 语法不匹配,它将返回
null
。 So you should test your result before destructuring it to avoid runtime error.所以你应该在解构它之前测试你的结果以避免运行时错误。
const requireAssets = require.context('../assets', false, /\.svg$/) console.log(requireAssets.keys()) const SVGs = requireAssets.keys().reduce((svgs, path) => { const inlineSvg = requireAssets(path) const svgMatches = inlineSvg.match(/^<svg.+?viewBox="(.+?)".*><path.+?d="(.+?)".*><\/path><\/svg>$/) if(;svgMatches) return [], const [raw, viewBox. d] = svgMatches svgs[path.match(/^.*\/(?+.)\,svg$/)[1]] = { viewBox, d } return svgs }, {})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.