我是 MERN 的新手，我正在學習它。我不知道如何從特定集合中獲取所有資料并將每條記錄的資料顯示在不同的卡片上。我已經開發了后端代碼并且在我通過郵遞員發送請求時運行良好，但是從 React 應用程式獲取和顯示資料對我來說是一個問題。我怎樣才能做到這一點？
我的后端 API 代碼
router.get('/ads', async (req,res,next)=>{
try{
const ads = await Ads.find();
return res.status(200).json({
success: true,
count: ads.length,
data: ads,
});
} catch(err) {
console.log(err);
res.status(500).json({ error: 'server error' });
}
});
uj5u.com熱心網友回復：
只需使用 AXIOS 庫在前端進行 REST 呼叫。您在 nodejs 專案中創建的只是一個端點，現在您必須從前端對端點進行 API 呼叫。
Heartbit 的回答也很恰當，但通常在 React 中，開發人員使用 AXIOS 庫進行其余 API 呼叫。
在此處閱讀檔案：https : //www.npmjs.com/package/axios
如果檔案對您來說太多了，那么當您開始觀看 AXIOS 教程時。
匯入 Axios 后，在 useEffect 鉤子中，您應該撰寫如下內容：
axios.get('/ads')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
uj5u.com熱心網友回復：
您可以通過多種方式查詢以從 API 服務器獲取資料。所以在這里我試圖描述其中的兩個。
1.通過原生瀏覽器FetchAPI：
const AdsContainer = ({children}) => {
const [data, setData] = useState();
useEffect(() => {
fetch('/ads').then(response => {
setData(response.json())
})
}, [])
return (
<AdsComponent data={data}>
{children}
</AdsComponent>
)
}
2.通過react-query：
這會給你更多的同步處理一樣loading，Error，Caching，等等。
首先，在你的頂層app，你應該提供它。
import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";
const queryClient = new QueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
<div className="App">
<AdsContainer />
</div>
</QueryClientProvider>
);
}
然后你AdsContainer可以獲取如下資料：
import {useQuery} from "react-query";
const AdsContainer = ({children}) => {
const query = useQuery('todos', () => {
return fetch("/ads").then(response => {
return response.json()
})
})
/* logics that depends on your data
* userEffect(() => {}, [data.length])
*/
return (
<AdsComponent data={query.data}>
{children}
</AdsComponent>
)
}
uj5u.com熱心網友回復：
我建議你安裝 axios。
- 了解更多https://www.npmjs.com/package/axios
- 使用：
useEffect(() => {
const getAds = async () => {
const res = await axios.get('/ads')
console.log(res.data)
}
getAds()
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/372923.html
標籤：javascript 节点.js 反应 MongoDB