两个组件的相同反应状态和反应钩子

Question

我在数据排序和过滤方面遇到问题，因为我对 productsort 和 filterBy 使用相同的 setData 方法，但是当我首先触发 filterBy 组件中的更改时，排序的数据会在 dom 上更新，然后只显示排序的数据

export default ({
  data = [],
  filterBy,
  productSort,
}: Iproduct) => {
  const [_data, setData] = useState<any>(data)

  useEffect(() => {
    setData(
      data.sort((a: Obj, b: Obj) => {
        if (a.name < b.name) {
          return -1
        }
      })
    )
  }, [data])

  return (
    <>
      <div className="sortMenu">
        {productSort &&
          ComponentsBuilder({
            ...productSort,
            onChange: (name: string, value: string) => {
              setData(
                data.sort((a: Obj, b: Obj) => {
                  if (a.name > b.name) {
                    return -1
                  }
                })
              )
            },
          })}
        {filterBy &&
          ComponentsBuilder({
            ...filterBy,
            onChange: (event: ChangeEvent<any>) => {
              const { value } = event.target
              setData(
                data.filter(({ name }: any) =>
                  name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
                )
              )
            },
          })}
      </div>
      <List
        className="products-cards-list"
        data={_data}
        grid={grid}
      />
    </>
  )
}