Как изменить компонент функции при изменении идентификатора в URL - PullRequest
Новая
       50

Как изменить компонент функции при изменении идентификатора в URL

0 голосов
/ 24 апреля 2020

У меня есть компонент React, который извлекает некоторые данные из IndexedDB, который является асинхронной задачей, он использует идентификатор из URL-адреса, переданного хуком useParams, пусть скажем id = 1. Когда я нажимаю на ссылку в примере, идентификатор изменяется 2, но в этот момент ничего не происходит, компонент не перерисовывается.

Что мне нужно сделать, чтобы он работал? Я просто не понимаю, почему это не работает прямо сейчас. Может ли кто-нибудь просветить меня? 

import React, {useState} from 'react';
import { Link, useParams } from "react-router-dom";
import { useAsync } from 'react-async';

export default function (props) {
  let {id} = useParams();
  const {data, error, isLoading} = useAsync({ promiseFn: loadData, id: parseInt(id)});
  if (isLoading) return "Loading...";
  if (error) return `Something went wrong: ${error.message}`;
  if (data)
   return (
    <>
      <h1>{data.name}</h1>
      <Link to={'/2'}>other id</Link>
    </>
   );
}

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Asyn c функции должны вызываться внутри useEffect hook. useEffect всегда будет вызываться при изменении id. 

import React, { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useAsync } from "react-async";

export default function(props) {
  let { id } = useParams();

  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    const { data, error, isLoading } = useAsync({
      promiseFn: loadData,
      id: parseInt(id)
    });
    setIsLoading(isLoading);
    setError(error);
    setData(data)
  }, [id]);

  if (isLoading) return "Loading...";
  if (error) return `Something went wrong: ${error.message}`;
  if (data)
    return (
      <>
        <h1>{data.name}</h1>
        <Link to={"/2"}>other id</Link>
      </>
    );
}
0 голосов
/ 28 апреля 2020

При использовании перехватчика useAsyn c из библиотеки реагировать-асин c вы можете использовать опцию watch или watchFn watch для изменений. Поэтому изменив следующую строку: 

const {data, error, isLoading} = useAsync({ promiseFn: loadData, id: parseInt(id)});

на: 

const {data, error, isLoading} = useAsync({ promiseFn: loadData, id: parseInt(id), watch: id});

сделали свое дело.

...