Получение данных с входным параметром с помощью 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());

Я пытаюсь отобразить список карт со значениями, поступающими после выбора страны для отправки в конечную точку. Как я могу это улучшить и заставить работать?

Answer 1

Похоже, вы пытаетесь получить данные для пустой страны. Если предположить, что ваш URL ожидает country быть не пустым, то это не сработает, потому что для выбора country тебе нужно data но получить data вам нужно выбрать country.