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

Question

我正在学习 remix，我的加载器中有一些函数，我可以使用 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();
...
}

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

Answer 1

还有另一种更新数据的方法，但不使用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()
}

您可以在官方文档中找到更多信息。

Answer 2

使用混音Form（或 HTML 表单）：

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

提交此表单将执行该loader功能。