ReactJS中如何根据布尔值在元素列表中仅显示一次指定内容

问题描述 #

我需要在React组件的循环中，基于数组元素的temp布尔值显示一个标签：只要数组里存在temp为true的元素，该标签就仅显示一次，不管有多少个符合条件的元素。但当前代码会为每个temp为true的元素都显示一次标签，现在需要修复这个问题，且不能硬编码任何值。

当前代码：

import React from 'react';
const MyComponent = () => {
const data = [
    { id: 1, name: 'Item 1', temp : false },
    { id: 2, name: 'Item 2', temp : false },
    { id: 3, name: 'Item 3', temp : true },
    { id: 4, name: 'Item 4', temp : true },
    { id: 5, name: 'Item 5', temp : true },
    { id: 6, name: 'Item 6', temp : false },
    { id: 7, name: 'Item 7', temp : false },
    { id: 8, name: 'Item 8', temp : false },
];
return (
    <div>
    {
        data.map((item) => {
        return (
        <div key={item.id}>
        <span>{item.name}</span>
        { item.temp ?
        <span> temp label displayed </span>
        : null
    }
    </div>
    );
})}
</div>
);
};
export default MyComponent;

当前输出：

解决方案 #

方法一：循环外判断并显示标签 #

先通过some()方法检查数组中是否存在temp为true的元素，随后在循环的上方或下方仅显示一次标签：

import React from 'react';
const MyComponent = () => {
const data = [
    { id: 1, name: 'Item 1', temp : false },
    { id: 2, name: 'Item 2', temp : false },
    { id: 3, name: 'Item 3', temp : true },
    { id: 4, name: 'Item 4', temp : true },
    { id: 5, name: 'Item 5', temp : true },
    { id: 6, name: 'Item 6', temp : false },
    { id: 7, name: 'Item 7', temp : false },
    { id: 8, name: 'Item 8', temp : false },
];
// 检查数组中是否有temp为true的元素
const hasTempTrueItem = data.some(item => item.temp);

return (
    <div>
        {/* 只要存在符合条件的元素，就显示一次标签 */}
        {hasTempTrueItem && <span> temp label displayed </span>}
        {data.map((item) => (
            <div key={item.id}>
                <span>{item.name}</span>
            </div>
        ))}
    </div>
);
};
export default MyComponent;

方法二：关联第一个符合条件的元素显示标签 #

如果需要标签和第一个temp为true的元素绑定，可以用findIndex()找到第一个符合条件元素的索引，在循环中仅对该元素显示标签：

import React from 'react';
const MyComponent = () => {
const data = [
    { id: 1, name: 'Item 1', temp : false },
    { id: 2, name: 'Item 2', temp : false },
    { id: 3, name: 'Item 3', temp : true },
    { id: 4, name: 'Item 4', temp : true },
    { id: 5, name: 'Item 5', temp : true },
    { id: 6, name: 'Item 6', temp : false },
    { id: 7, name: 'Item 7', temp : false },
    { id: 8, name: 'Item 8', temp : false },
];
// 获取第一个temp为true的元素索引
const firstTempTrueIndex = data.findIndex(item => item.temp);

return (
    <div>
        {data.map((item, index) => (
            <div key={item.id}>
                <span>{item.name}</span>
                {/* 仅在第一个符合条件的元素处显示标签 */}
                {index === firstTempTrueIndex && <span> temp label displayed </span>}
            </div>
        ))}
    </div>
);
};
export default MyComponent;

内容的提问来源于stack exchange，提问作者ɐudɐʍs s