使用SWR挂钩获取具有输入参数的数据

问题描述

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

我正在尝试显示一个卡列表，其中包含选择要提交给端点的国家/地区之后的值。我该如何改善它并使之真正起作用？

解决方法

好像您正在尝试获取一个空国家的数据。如果假设您的网址期望country不为空，那么它将无法正常工作，因为选择country需要您data，但要获得data，您需要选择一个country。