使用反冲选择器过滤组件数据？

Question

我觉得我已经阅读了很多示例/文档并观看了视频，但我无法理解使用带有后坐力的选择器。也许我只是度过了糟糕的一天，因为我认为这并不难。

这就是我所在的地方......

假设我有如下数据：

const data = [
  {
    name: "wiggles",
    type: "cat",
    age: "244",
  },
  {
    name: "wobbles",
    type: "dog",
    age: "55",
  },
  {
    name: "flobbles",
    type: "dog",
    age: "98",
  },
];

在我的索引中我有：

export const typeFilterState = atom({
   key: 'typeFilterState',
   default: '',
});
const UserPage: NextPage<Props> = ({data}) => {

const [typeFilter, setTypeFilter] = useRecoilState(typeFilterState);

return(
<select onChange={(e) => setLeagueFilter(e.target.value)}>
<option value='cat'>Cat</option>
<option value='dog'>Dog</option>
<option value='elephant'>Elephant</option>
</select>

{
  data.map((d) => (
    <DataComponent data={d} />
  ))
}
)};

DataComponent 会是这样的：

const DataComponent: FunctionComponent<Animals> = ({data}) => {
return (
   <Text>{data.name}</Text>
   <Text>{data.type}</Text>
   <Text>{data.age}</Text>
)
};

我想要它，所以如果用户选择 cat 它只显示猫的数据，但如果没有选择任何内容，也会显示所有数据...

Answer 1

您的<select> onChange 函数中有错字：

// <select onChange={(e) => setLeagueFilter(e.target.value)}>
<select onChange={(e) => setTypeFilter(e.target.value)}>

在映射为组件之前，只需根据typeFilter 值过滤数组：

// data.map((d) => (
//   <DataComponent data={d} />
// ))

data
  .filter(({type}) => {
    // nothing selected yet, keep all:
    if (!typeFilter.trim()) return true;
    // else keep if item.type equals filter:
    return type === typeFilter;
  })
  .map((d) => (
    <DataComponent data={d} />
  ))