使用无线电输入进行过滤，在渲染时显示所有数组值，并可选择'all'

Question

我正在用标签过滤我的应用程序。每个标签都是带有标签的无线电输入。它成功筛选包含所选标记的数据。

但是，我的目标是在首次渲染时显示所有数据，并添加"全部"单选按钮。

这是我到目前为止的代码

const [currentTag, setCurrentTag] = useState('');
const filteredByTag = workouts.filter(workout =>
workout.tags.filter(tag => tag).includes(currentTag)
);
<div>
<ul>
{tags.map(tag => {
return (
<label
key={tag}
htmlFor={`filter-${tag}`}
>
<span>{tag}</span>
<input
type='radio'
name='tag'
id={`filter-${tag}`}
value={tag}
checked={tag === currentTag}
onChange={e => setCurrentTag(e.target.value)}
/>
</label>
);
})}
</ul>
</div>
<ul>
{filteredByTag.map(workout => (
<Workout
key={workout.name}
name={workout.name}
description={workout.description}
tags={workout.tags}
/>
))}
</ul>

上面顶部的代码包括我的标签数组['back', 'biceps', 'chest]映射为无线电输入。 底部的代码显示包含与currentTag中的值相同的标记的锻炼

澄清一下。到目前为止，单击单选按钮后仅显示锻炼。我想要的是渲染时所有锻炼都显示一个额外的"全部"无线电输入。因此，用户可以过滤，然后单击"全部"以显示所有锻炼。

对不起，如果问题不好，不知道从哪里开始。

Answer 1

在 tags 数组中有一个all选项。将useState默认值设置为"all"。有一个三元，并且仅在当前标签未all时才进行过滤(即仅使用用户选择的值进行过滤(

const [currentTag, setCurrentTag] = useState('all');
...
const filteredByTag = currentTag === 'all' ? workouts :  workouts.filter(workout =>
workout.tags.includes(currentTag)
);

在 JSX 中，在映射时，还包括all。

<ul>
{tags.concat('all').map(tag => {
return (
<label
...