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

Question

我觉得我已经阅读了很多 examples/docs 并观看了视频，但我无法使用 select 或后坐力。也许我只是今天过得很糟糕，因为我认为这没有那么难。

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

假设我有这样的数据：

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>
)
};

我想要它，所以如果用户 select cat 它只显示猫的数据，但如果没有 selected...

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} />
  ))

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

Using recoil selector to filter component data?

javascript

typescript

reactjs

recoiljs