Question

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

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

谢谢！

编辑谢谢大家的意见。我打算对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            
    }
});

Answer 1

您应该进行这些更改

item.Text.length在尝试查找单个字符的长度时将始终返回1。
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))

Answer 2

您正在使用switch语句，并且当条件匹配时，您将返回一个值，因此无需使用break；返回后的关键字。您的switch语句应如下所示：

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            
    }

编辑：而且您将获得每个文本字符串的长度，每次您的情况都是1。

Answer 3

两个问题：

一个，您不需要在break之后使用return语句。这就是在控制台中触发错误的原因。

两个，您正在打开每个Text字段的长度。文字的长度始终为1。因此，switch语句中的任何其他分支也是无法访问的代码。

通过数组映射的switch语句给出了无法到达的代码警告

3 个答案: