使用基于路由器参数的自定义 React 钩子获取答案

【问题标题】：Fetching w/ custom React hook based on router parameters使用基于路由器参数的自定义 React 钩子获取
【发布时间】：2020-04-13 12:24:23
【问题描述】：

我正在尝试根据当前路由器参数使用自定义 React 挂钩获取数据。

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

应该怎么做：

首次加载时，检查 URL 是否包含 ID...

如果是，则获取具有该 ID 的待办事项
如果没有，请使用随机 ID 获取待办事项并将 ID 添加到 url

点击获取按钮时...

使用随机 ID 获取待办事项并将 ID 添加到 url

出了什么问题：

查看控制台或检查器网络选项卡，您可以看到它在每次点击时触发多个获取请求 - 为什么会这样以及应该如何正确完成？

【问题讨论】：

标签： reactjs fetch react-hooks

【解决方案1】：

由于您在 handleClick 上使用了 history.push，当您在 click 处理程序上使用 history.push 时，您会看到发送了多个请求，这将导致重新渲染并使用随机生成的 url 以及触发 fetchTodo功能。

现在将发生重新渲染，这会导致生成随机 id。并传递给 useTodo 钩子，这将导致再次调用 fetchTodo 函数。

正确的解决方案是在 handleClick 上设置随机 todo id 参数，同时避免不必要的 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;

Working demo

【讨论】：

谢谢，不过，在您的分叉演示中，我仍然看到每次加载都有多次提取？
更新了一个工作演示，而不是在 todo.js 中处理重定向。我们使用了来自 index.js 的重定向