reactjs - 使用 SWR Hook 获取带有输入参数的数据

Question

function DayOne() {
  const [country, setCountry] = useState("");
  const url = `${process.env.REACT_APP_BASE_URL}/dayone/all/total/country/${country}`;
  const { data, error } = useSWR(url, fetcher);
  let value = useRef("");

  const onClick = async (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    return setCountry(value.current);
  };

  const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    value.current = e.target.value;
  };

  let index = 1;
  if (error) return <div>failed to load</div>;
  if (!data) return <Loading />;
  const { name } = data;
  return (
    <div>
      {console.log(data)}
      <ContainerComp>
        <NavBar />
        {console.log(country)}

        <InputCountryForm myRef={value} onChange={onChange} onClick={onClick} />
        <div>{country}</div>
        {name &&
          name.map((n: IDayOne) => {
            <CustomCard icon={""} title={country} value={n.Active} />;
          })}
      </ContainerComp>
    </div>
  );
}

export default DayOne;

取器

export const fetcher = (url: string) => fetch(url).then((res) => res.json());

我试图显示一个卡片列表，其中包含在选择一个国家提交到端点后出现的值。我怎样才能改进这一点并使其真正发挥作用？