在渲染时跳过某些数组项答案

【问题标题】：Skip certain array items on render在渲染时跳过某些数组项
【发布时间】：2020-09-11 11:38:27
【问题描述】：

我对 React 和编码非常陌生。我正在从 API 的数据中获取数据，我设法使用 map 函数获取所有数据，所以现在我拥有了所有数据。我把映射函数放在下面。但是我想做的是选择数据而不是全部打印出来，例如，我只想拥有 ERNERC KCAL 和 FAT，但我迷路了，我不知道该怎么做。我附上了一张数据的图片。我们将不胜感激所有的帮助

   {Object.keys(nutritions).map(key => (<Nutrition
        label={nutritions[key].label}
        quantity={nutritions[key].quantity}
        unit={nutritions[key].unit}
        
        />))}

【问题讨论】：

您想将对象的所有属性传递给Nutrition 组件吗？
我已经将对象的所有属性传递给 Nutrition 组件，它工作正常，但现在我只想显示其中的 2 个，我不知道该怎么做
所以您只想在 Nutrition 组件中显示两个响应对象？
您可以在地图内添加一个 IF 语句。 if(item.label === 'FAT') { // 做点什么}
只需在检查这两个的地方添加一个 if 语句（三元）。 `key === ‘xxx’ ||关键 === 'yyy' ? : null

标签： javascript reactjs loops object fetch

【解决方案1】：

有短路评估：

{Object.keys(nutritions).map(key => key === "YOUR_VAL" && (<Nutrition
        label={nutritions[key].label}
        quantity={nutritions[key].quantity}
        unit={nutritions[key].unit}

        />))}

使用 if 语句：

{Object.keys(nutritions).map(key =>{

 if (key === "YOUR_VAL") return (<Nutrition
        label={nutritions[key].label}
        quantity={nutritions[key].quantity}
        unit={nutritions[key].unit}

        />)})}

带过滤器


const myKeys = ["VAL1", "VAL2"]

{Object.keys(nutritions)
.filter((key) =>  myKeys.indexOf(key) !== -1)
.map(key => (<Nutrition
        label={nutritions[key].label}
        quantity={nutritions[key].quantity}
        unit={nutritions[key].unit}

        />))}

【讨论】：

感谢您的意见；修好了

【解决方案2】：

您可以在执行.map() 时有条件地跳过某些项目，例如像这样：

{
    Object.keys(nutritions).map(key => 
        ['ENERC_KCAL', 'FAT'].includes(key) && 
        (
            <Nutrition
                label={nutritions[key].label}
                quantity={nutritions[key].quantity}
                unit={nutritions[key].unit}
            />
        )
    )
}

【讨论】：

啊，太好了，这就是我试图做的，但我没有将密钥放入数组中，我还将它们放在包含之后。有用。非常感谢
请问你为什么把&&放在includes(key)之后
那叫short-circuit evaluation，基本上相当于if(['ENERC_KCAL', 'FAT'].includes(key)){return <Nutrition...