Извлечение с настраиваемой обработкой React на основе параметров маршрутизатора - PullRequest
Новая
       25

Извлечение с настраиваемой обработкой React на основе параметров маршрутизатора

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

Я пытаюсь получить данные с помощью пользовательской ловушки React, основанной на текущих параметрах маршрутизатора.

https://stackblitz.com/edit/react-fetch-router

Что он должен делать:

При первой загрузке проверьте, содержит ли URL идентификатор ...

  • Если это так, извлеките задачу с этим идентификатором
  • Если этого не произойдет, извлеките todo со случайным ID и добавить ID в URL

При нажатии кнопки извлечения ...

  • Получить todo со случайным ID и добавить ID в url

Что не так:

Наблюдая за вкладкой сети консоли или инспектора, вы видите, что при каждом щелчке запускается несколько запросов на выборку - почему это происходит и как это должно быть сделано правильно?

1 Ответ

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

Поскольку вы использовали history.pu sh на handleClick, вы увидите несколько запросов, отправляемых при использовании history.pu sh на обработчике кликов, что вызовет повторный рендеринг и позволит использовать произвольно сгенерированный URL как а также вызвать функцию fetchTodo.

Теперь произойдет повторный рендеринг, который приведет к генерации случайного идентификатора. и передается на ловушку useTodo, которая приведет к повторному вызову функции fetchTodo.

Правильное решение для вас - установить параметр random todo id на handleClick, а также избежать ненужных обновлений URL 

const Todos = () => {
    const history = useHistory();
    const { id: todoId } = useParams();
    const { fetchTodo, todo, isFetching, error } = useTodo(todoId);
  const isInitialRender = useRef(true);

    const handleClick = () => {
    const todoId = randomMax(100);
    history.push(`/${todoId}`);
    };


    useEffect(() => {
        history.push(`/${todoId}`);
    }, []);

  useEffect(() => {
    if(!isInitialRender.current) {
        fetchTodo();
    } else {
      isInitialRender.current = false
    }
  }, [todoId])

    return (
        <>
            <button onClick={handleClick} style={{marginBottom: "10px"}}>Fetch a todo</button>
        {isFetching ? (
          <p>Fetching...</p>
          ) : (
          <Todo todo={todo} color={todo.color} isFetching={isFetching} />
        )
      }
        </>
    );
};

export default Todos;

Рабочая демоверсия

...