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

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它只显示带有cat的数据，但如果未选择任何内容，也会显示所有数据。。。

Answer 1

您的

js prettyprint-override">// <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} />
  ))