有没有办法在 remix 中使用 useLoaderData 重新获取?

我正在学习混音,我的加载器中有一些函数,我用 useLoaderData 在我的默认路由中调用,如下所示:

export const loader = async () => {
  const pokemon = await getRandomPokemon();
  const types = await getAllPokemonTypes();
  return [pokemon, types.results];
};

export default function App() {
  const [pokemon, types] = useLoaderData();
...
}

我想添加一个按钮来重新加载数据(因为在这种情况下我想要一个新的随机口袋妖怪)每次我点击它

stack overflow Is there a way to refetch with useLoaderData in remix?
原文答案
author avatar

接受的答案

使用混音 Form (或 HTML 表单):

<Form method="get">
  <button type="submit">Reload</button>
</Form> 

提交此表单将执行 loader 函数。


答案:

作者头像

还有另一种更新数据的方法,但不使用 Form 组件:

import { useRevalidator } from 'react-router-dom';

...

export default function App() {
  const [pokemon, types] = useLoaderData();
  const revalidator = useRevalidator();

  // run when you need to update
  revalidator.revalidate()
}

您可以在 official documentation 中找到更多信息。