时间戳

首页 > 解决方案 > 通过数组映射的 Switch 语句给出无法访问的代码警告

javascript - 通过数组映射的 Switch 语句给出无法访问的代码警告

问题描述

这可能是我想念的一个非常简单的解决方案，但希望有人能提供帮助。

我正在遍历一个数组并试图找出它的长度，并根据长度返回不同的值。然后我映射它并希望根据数量返回值。有人可以告诉我我做错了什么吗？

谢谢！

编辑 谢谢大家的意见。我打算对 switch 语句结果做的是根据 getGridPercentages 数组值确定网格大小。因此，如果它是“4”，它将返回“25% 25% 25% 25%”。

然后，我使用 CSS 网格的 grid-template-columns 在样式化组件中使用该值：

const ContainerWrapper = styled.div `
display: grid;
grid-template-columns: ${op}; //Value of grid here
grid-gap: 10px;
`;

const getGridPercentages = [
    {
        Text: '1'
    },
    {
        Text: '2'
    },
    {
        Text: '3'
    },
    {
        Text: '4'
    }
]

let op = getGridPercentages.map(function(item) {
    const getAmount = item.Text;
    switch(getAmount) {
        case '1':
            return '100%'
        case '2':
            return '50% 50%'
        case '3':
            return '33% 33% 33%'
        case '4':
            return '25% 25% 25% 25%'
        default: 
            return 1            
    }
});

标签： javascriptreactjs

解决方案

您应该进行这些更改

  1. 当您尝试查找单个字符的长度时，item.Text.length 将始终返回 1。
  2. return 语句后不需要 break 语句。（这是无法访问的代码的样子）

const getGridPercentages = [
    {
        Text: '1'
    },
    {
        Text: '2'
    },
    {
        Text: '3'
    },
    {
        Text: '4'
    }
]

let op = getGridPercentages.map(function(item) {
    const getAmount = item.Text;
    
    switch(getAmount) {
        case '1':
            return '100%'
        case '2':
            return '50% 50%'
        case '3':
            return '33% 33% 33%'
        case '4':
            return '25% 25% 25% 25%'
        default: 
            return 1            
    }
});

console.log(op);

更新：正如您在评论中根据与问题所说的完全相反的元素数量提出的要求。

const getGridPercentages = [
    {
        Text: '1'
    },
    {
        Text: '2'
    },
    {
        Text: '3'
    },
    {
        Text: '4'
    }
]

function getGridSize(arr){
  switch(arr.length) {
        case 1:
            return '100%'
        case 2:
            return '50% 50%'
        case 3:
            return '33% 33% 33%'
        case 4:
            return '25% 25% 25% 25%'
        default: 
            return 1            
    }

}

console.log(getGridSize(getGridPercentages))

推荐阅读