小编Gus*_*ias的帖子

我一直在尝试学习 React-query 但似乎无法用我的onSubmit事件触发请求。现在，代码正在发送以“washington”作为默认参数的请求并将其打印到屏幕上，并且新请求也会随事件触发onBlur，并在输入的城市有效的情况下获取数据。

问题是，我希望我可以将此逻辑移至函数中submit()，处理输入上的数据，并且仅当数据有效时，才继续发出请求。这是我使用免费 apiKey 重现问题的 stackblitz：StackBlitz

这是代码：

import React, { useState } from 'react';
import { useQuery } from 'react-query';
import axios from 'axios';

const Fetch = async city => {
  let apiKey = '91b5ff77e9e7d1985a6c80bbbb3b2034';
  const { data } = await axios.get(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
  );
  return data;
};

const Weather = () => {
  const [city, setCity] = useState('washington');
  const { data, error } = useQuery(['temperature', city], () => Fetch(city));

  const submit = …