我在App.js中有示例API请求脚本，当我在本地系统中运行时，API请求命中两次，请参考代码并让我知道我做错了什么。先谢谢你了
enter image description here
import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from "react";
function App() {
const [user, setUser] = useState([]);
const fetchData = () => { return fetch("https://jsonplaceholder.typicode.com/users", {method:'GET', headers: {
'Accept': 'application/json',
"Content-Type": "application/x-www-form-urlencoded"
}}) .then((response) => response.json()) .then((data) => setUser(data)); }
useEffect(() => { fetchData(); },[])
return (
<main> <h1>User List</h1> <ul> {user && user.length > 0 && user.map((userObj, index) => ( <li key={userObj.id}>{userObj.name}</li> ))} </ul> </main>
);
}
export default App;我期待单一的请求命中，而加载页面
3条答案
按热度按时间2admgd591#
在React.Js中，
strict Mode被启用。因此，它会将整个组件重新渲染两次，以便您可以轻松检查结果。这是reactjs告诉你仔细检查API结果或其他功能是否正常工作的方式。您可以通过删除<React.StrictMode>来禁用index.js文件这个严格模式只在
development not in build production中工作，所以我建议不要删除strictMode。s5a0g9ez2#
你正在使用useEffect，它将在页面加载后立即呈现。因此，在index.js文件中，您必须<React.StrictMode>删除并尝试它。
jgwigjjp3#
在React中调用 AJAX 请求两次
你好，这是刚刚发生在本地主机。如果你想在你的本地主机上修复它，你可以在你的index.js中删除React.StrictMode。
如果你部署在某个地方，并且不想删除React.StrictMode，它不会在API调用时发生两次。你可以试着在vercel上部署并检查一下。那很好