如何使用React查询获取数据并过滤？

Question

当我尝试应用过滤数据功能时，出现错误显示，我不知道解决方案，我向聊天 gpt 和 google bard 询问，但根本没有结果。 这是代码和错误屏幕：

import { useSearchParams } from "react-router-dom";
import styled, { css } from "styled-components";
const StyledFilter = styled.div`
  border: 1px solid var(--color-grey-100);
  background-color: var(--color-grey-0);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-sm);
  padding: 0.4rem;
  display: flex;
  gap: 0.4rem;
`;
const FilterButton = styled.button`
  background-color: var(--color-grey-0);
  border: none;
  ${(props) =>
    props.$active &&
    css`
      background-color: var(--color-brand-600);
      color: var(--color-brand-50);
    `}
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  font-size: 1.4rem;
  /* To give the same height as select */
  padding: 0.44rem 0.8rem;
  transition: all 0.3s;
  &:hover:not(:disabled) {
    background-color: var(--color-brand-600);
    color: var(--color-brand-50);
  }
`;
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  font-size: 1.4rem;
  /* To give the same height as select */
  padding: 0.44rem 0.8rem;
  transition: all 0.3s;
  &:hover:not(:disabled) {
    background-color: var(--color-brand-600);
    color: var(--color-brand-50);
  }
`;
function Filter({ filterField, options }) {
  const [searchParams, setSearchParams] = useSearchParams();

  const currentFilter = searchParams.get(filterField) || options.at(0).value;

  function handleClick(value) {
    searchParams.set(filterField, value);
    setSearchParams(searchParams);
  }
  return (
    <StyledFilter>
      {options.map((option) => (
        <FilterButton
          key={option.value}
          onClick={() => handleClick(option.value)}
          active={option.value === currentFilter}
          disabled={option.value === currentFilter}
        >
          {option.label}
        </FilterButton>
      ))}
    </StyledFilter>
  );
}
export default Filter;

我尝试过滤信息

Answer 1

我认为这里的

$active

根据

active

组件应该是

filterButton

。 （或反之亦然）

const FilterButton = styled.button`
  background-color: var(--color-grey-0);
  border: none;
  ${(props) =>
    props.active &&    {/* Change '$active' to 'active' */}
    css`
      background-color: var(--color-brand-600);
      color: var(--color-brand-50);
    `}