我試圖找出一種方法，我可以只將資料庫中的資料加載到某個組件一次。
useEffect(() => {
axios.get("http://localhost:5000/members")
.then(res => {
setMembers(res.data)
})
catch(error => console.error(error.message))
})
每次加載此組件時，都會向服務器發出請求以獲取“成員”。我需要一種只發出一次請求的方法，也就是第一次加載組件時。有沒有辦法實作這一目標？
uj5u.com熱心網友回復：
在組件的功能之外發出請求。Promise 只決議一次，但決議后的值可以被多次檢索。
import axios from "axios";
import { useEffect, useState } from "react";
// Make the request here and keep a reference to the returned promise
const promise = axios.get("http://localhost:5000/members")
.then(({ data }) => data);
const MyComponent = (props) => {
const [ members, setMembers ] = useState([]);
useEffect(() => {
// set your state from the resolved promise
promise.then(setMembers)
.catch(err => console.error(err.toJSON()));
}, []); // empty dependencies array means this only runs on mount
return ( /* whatever */ );
};
您可以在演示中看到，同一個組件被加載了 3 次，但請求只發出了一次。
uj5u.com熱心網友回復：
您可以使用 Context 在整個應用程式中持久化資料，也可以使用 redux 將資料存盤在集中式應用程式狀態。
uj5u.com熱心網友回復：
您在這里犯了一個錯誤，將 useEffect 作為第二個引數未通過。
useEffect(() => {
axios.get("http://localhost:5000/members")
.then(res => {
setMembers(res.data)
})
catch(error => console.error(error.message))
}, [])
uj5u.com熱心網友回復：
你只需要[]在 React 中的 useEffect 鉤子末尾添加。當一個組件加載資料時，它不會多次運行這個useEffect。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/449265.html