英文:
Axios making double post request while loading page
问题
当我使用Postman进行此POST请求时，它正常工作，但在这种情况下，我的Django服务器显示已经进行了两个请求，数据也被记录了两次。我正在使用JWT令牌，如果它与某种方式相关...
const controller = new AbortController();
const [isLoading, setIsLoading] = useState(true);
const [userData, setUserData] = useState({
name: "",
username: "",
email: ""
});
const getData = () => {
axiosInstance.post("/api/detail/", {
signal: controller.signal
})
.then((data) => {
setUserData({
name: data.data.name,
username: data.data.username,
email: data.data.email
});
console.log(data); // 这个数据被记录了两次
setIsLoading(false);
return controller.abort();
})
.catch((err) => {
console.log("错误是", err);
});
return controller.abort();
}
useEffect(() => {
getData();
}, []);
英文:
When I made this post request with postman it works fine but in this case my django server shows two requests are made and data is also logged twice. I am using jwt tokens if it is related somehow ...
const controller = new AbortController();
const [isLoading , setIsLoading] = useState(true)
const [userData , setUserData] = useState({
name:"",
username:"",
email:""
})
const getData = () =>{
axiosInstance.post("/api/detail/" , {
signal:controller.signal
})
.then((data) =>{
setUserData({
name : data.data.name,
username : data.data.username,
email : data.data.email
}
)
console.log(data) // this data is logged twice
setIsLoading(false)
return controller.abort()
}).catch((err)=>{
console.log("error is" , err)
})
return controller.abort()
}
useEffect(()=>{
getData()
} ,[])
答案1
得分: 2
你可能正在使用StrictMode。检查你的主文件（index.js，main.js），看看组件是否包装成这样：
root.render(
<StrictMode>
<App />
</StrictMode>
);
有关更多详细信息，请参阅此答案：https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode/61897567#61897567
英文:
You are probably using the StrictMode. Check your main file (index.js, main.js) and see if the component is wrapped like this:
root.render(
<StrictMode>
<App />
</StrictMode>
);
For more details about that, you can see this answer: https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode/61897567#61897567
答案2
得分: 1
useEffect在开发模式下会被调用两次，如果启用了严格模式，它将在生产模式下仅运行一次。
在useEffect中不应尝试使用useRef和if语句来使其仅触发一次，或者移除StrictMode，因为React在开发中有意重新挂载组件，以帮助您找到错误，因此useEffect会被调用两次。更多信息请参考此处：https://stackoverflow.com/a/72238236/12083049
我强烈建议使用数据获取库，例如react-query或swr来处理API。
swr示例：
import useSWR from 'swr'
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher)
if (error) return <div>加载失败</div>
if (isLoading) return <div>加载中...</div>
return <div>你好，{data.name}！</div>
}
英文:
useEffect is called twice in the development mode and will only run once on production if strict mode is enabled.
You shouldn't try to use those technics with useRef and if statements in useEffect to make it fire once, or remove StrictMode because react intentionally remounts your components in development to help you find bugs and because of that use effect is called twice. Read here for more information: https://stackoverflow.com/a/72238236/12083049
I would highly recommend using a data-fetching library like react-query or swr to work with API.
swr example:
import useSWR from 'swr'
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论