尾随和前导逗号添加问题

【问题标题】：Trailing and leading commas added issue尾随和前导逗号添加问题
【发布时间】：2022-01-13 03:56:00
【问题描述】：

我在<img src = "xyz(id)" /> 中以xyz(id) 的形式从jsx 调用一个函数。在调用函数中，我通过映射检索图像值

const xyz = (id) =>{
     return abc.map(a => {
         if(a.id === id){
             if(a.url){
                 return a.url;
                 }
             }
         })
     }

当我检查 img 元素尾随和前导逗号被附加在 return 语句之后作为“..returned_url..”。

【问题讨论】：

为什么你的函数用引号括起来？
这是一个打字错误。对不起，我的坏事

标签： javascript reactjs jsx

【解决方案1】：

如果匹配，您只需将 url 部分返回给调用者 - 您需要从 .map 回调中排除空结果，否则它们将显示为大量逗号之间的空字符串。

const xyz = (id) => {
    return abc
        .map(a => {
            if (a.id === id && a.url) {
                return a.url;
            }
        })
        .filter(Boolean);
}

但是当您尝试设置 src 时返回一个数组没有多大意义。如果只有一个可能的匹配项，使用.find 可能比.map 更合适，也许

const xyz = (id) => {
    return abc
        .find(a => a.id === id)
        ?.url;
}

【讨论】：