reactjs 基于状态更改进行查询

2nc8po8w 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(148)

我正在做一个口袋妖怪团队建设者，并试图使用React查询，因为我试图使用该高速缓存功能，而不是作出这么多的请求，以开放和公共PokeAPI。
我有一个下拉菜单，允许用户选择一个口袋妖怪的名字。当一个口袋妖怪被选中，我希望'移动'下拉菜单填充一个列表，口袋妖怪移动选择。
我最初的方法是使用一个依赖于口袋妖怪敏捷度的useEffect钩子。

useEffect(() => {
    if (pokeDexNum) {
        // fetch `https://pokeapi.co/api/v2/pokemon/${pokeDexNum}`
    }
  }, [pokeDexNum])

我不知道如何在React-Query中使用它。我想做的是当用户选择一个口袋妖怪时，PokeAPI会获取口袋妖怪可用的移动，并将它们放入“移动”下拉列表的options中，这样他们就可以选择移动。
从下面的代码中，您可以看到当从“Pokemon”下拉列表中选择一个Pokemon时，它会更新const [pokeDexNum, setPokeDexNum] = useState(null);状态

<Form>
      <Form.Group>
        <Form.Dropdown
          label="Pokemon"
          search
          selection
          clearable
          selectOnBlur={false}
          value={pokeDexNum}
          onChange={(e, data) => setPokeDexNum(data.value)}
          options={[
            { text: "Tepig", value: 498 },
            { text: "Oshawott", value: 501 },
            { text: "Snivy", value: 495 },
          ]}
        />
        <Form.Dropdown label="Moves" search selection options={[]} />
      </Form.Group>
    </Form>

我如何能够根据pokeDexNum是否更新来使用react query进行提取
查询示例

const { isLoading, error, data } = useQuery('getPokeMoves', () =>
     fetch(`https://pokeapi.co/api/v2/pokemon/${pokeDexNum}`).then(res =>
       res.json()
     )
   )

即使pokeDexNum是null，上面的查询有时也会获取。

reactjs

来源：https://stackoverflow.com/questions/74965417/make-a-query-based-on-a-state-change

2条答案

按热度按时间

ybzsozfc1#

正如@Arjun的回答所述，您需要将pokeDexNum状态添加到queryKey数组中，可以将其视为useEffect的依赖项，任何时候pokeDexNum更新/更改，都会触发该查询的重取。
由于pokeDexNum的初始值是null，您不希望在状态更新之前触发查询。为了避免这种情况，您可以在useQuery中使用enabled选项：

const fetchPokemon = (pokeDexNum) => {
  return fetch(`https://pokeapi.co/api/v2/pokemon/${pokeDexNum}`).then((res) =>
    res.json()
  )
}

const { isLoading, error, data } = useQuery(
  ['getPokeMoves', pokeDexNum],
  () => fetchPokemon(pokeDexNum),
  {
    enabled: Boolean(pokeDexNum)
  }
)

另外，添加一些错误处理也是一个好主意，我想您是为了简洁而省略了这一点。

赞(0）回复(0）举报 2023-01-02

euoag5mw2#

解决方案：您需要将pokeDexNum添加到useQuery的queryKey中。
我的建议是，
定义一个函数来调用useQuery .添加你的pokeDexNum到queryKey .

const useGetPokeMoves = (pokeDexNum) => {
  return useQuery(
    ["getPokeMoves", pokeDexNum],
    () => {
      return fetch(`https://pokeapi.co/api/v2/pokemon/${pokeDexNum}`).then(
        (res) => res.json()
      );
    },
    { keepPreviousData: true }
  );
};

然后在组件中使用它，

const { data } = useGetPokeMoves(pokeDexNum);

只要您的状态发生变化，queryKey也将发生变化，并且将获取查询。

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 基于状态更改进行查询

2条答案

相关问题

热门标签

最新问答