React / JSX中的三元运算符不起作用

Question

我正在映射来自eBay API拉取的数据，如果值等于true，则尝试显示一个图标，如果值等于false，则尝试显示一个图标。

该字段称为bestOfferEnabled，其值为'true'或false。

这是示例数据集https://pastebin.com/mqCscKss/

我正在尝试：

{item.listingInfo[0].bestOfferEnabled === true && (
            <i className="fas fa-comment-dollar"></i>
          )}

并且它不会生成图标。我也尝试过各种版本，包括引号中的true，但没有任何作用。

[当我尝试在页面上执行此操作时输出文本：

{item.listingInfo[0].bestOfferEnabled}

它确实打印出一个真或假值

Answer 1

这是因为bestOfferEnabled是数组的键：

listingInfo: [{
    bestOfferEnabled: [
        "false"
    ],
}]

所以您必须这样做：

{item.listingInfo[0].bestOfferEnabled[0] === true && (
            <i className="fas fa-comment-dollar"></i>
)}

您还可以使用every Array方法来确保数组中的所有值均为true：

{item.listingInfo[0].bestOfferEnabled.every(key => key) && (
            <i className="fas fa-comment-dollar"></i>
)}

更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

EDIT：正如某人指出的那样，您的布尔值是字符串，在这种情况下，您可以使用JSON.parse对其进行转换。

{item.listingInfo[0].bestOfferEnabled.every(key => JSON.parse(key)) && (
            <i className="fas fa-comment-dollar"></i>
)}

这应该可以解决问题。