如何在React中自动发出API请求？

Question

我试图为我的浏览器创建一个定制的主页。我已经实现了一个API来显示天气，但只有当我按下回车键时才能工作。我想在加载页面时自动显示数据，不按回车键，自动显示布里斯托尔天气，当我键入另一个位置时，api将能够请求和渲染。我尝试了很多方法，比如（删除钩子，改变钩子的初始状态，但似乎没有什么工作）这是我的代码：

    const [query, setQuery] = useState('Bristol');
    const [weather, setWeather] = useState({});

const search = async () => {
    fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
    .then(res => res.json())
    .then(result => {
        setWeather(result);
        setQuery('')
        console.log(result)
    });
}

    return(
        <div className="app">
            <main>
                <div className="search-box">
                    <input
                        type="text"
                        className="search-bar"
                        placeholder="Search..."
                        onChange={e => setQuery(e.target.value)}
                        value={query}
                        onKeyPress={search}
                    />
                </div>
                {(typeof weather.main != "undefined") ? (
                    <div>
                    <div className="location-box">
                        <div className="location">{weather.name}</div>
                        <div className="date">{dateBuilder(new Date())}</div>
                    </div>
                        <div className="weather-box">
                            <div className="temp">
                                {Math.round(weather.main.temp)}
                            </div>
                            <div className="weather">
                                {weather.weather[0].main}
                            </div>
                        </div>
                    </div>
                ) : ('')}
            </main>
        </div>
    )
} 

我是ReactJS新手，这有点让人困惑，因为在这里我使用同一个文件来编码和渲染，我以前做过这件事，但我在express中使用的是纯JavaScript，等等。。我把它转换成HTML。

Answer 1

尝试在useffect中包装fetch调用：

  useEffect(() => {
    fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
      .then((res) => res.json())
      .then((result) => {
        setWeather(result);
        console.log(result);
      });
  }, [query]);

第二个参数是所谓的依赖项数组。每当其内容更改时，将重新运行效果，请参见https://reactjs.org/docs/hooks-effect.html.

还删除onKeyPress={search}，因为它与onChange={e=是冗余的

其他资源：

• Robin Wieruch：如何使用React钩子获取数据？https://www.robinwieruch.de/react-hooks-fetch-data

Answer 2

useEffect( () => search(), [])