這是快速后端和 MongoDB 資料庫的路由代碼形式，來自前端的正常呼叫fetch("/")回傳 index.html 代碼，添加fetch("http://localhost:9000")后回傳 CORS 錯誤，所以我添加了app.use(cors()).
router.get("/", async (req, res) => {
Journal.find({}, function (err, journals) {
if (err) {
res.send("Something went wrong");
}
res.json(journals);
});
});
這是從 reactjs 前端發出的 axios 和 fetch 請求，在“/”上進行 fetch 和 axios 呼叫，因為在后端什么都沒有出現，只有 index.html 代碼被回傳，所以我開始使用“http://localhost: 9000" 然后資料來了，但是這個本地主機問題出現了。
const [journals, setJournals] = useState([
{ title: "Day 1", content: content_string },
]);
useEffect(() => {
getJournalData();
});
// const getJournalData = async () => {
// try {
// const res = await fetch("http://localhost:9000/");
// const data = await res.json();
// setJournals(data);
// console.log(data);
// } catch (err) {
// console.error(err);
// }
// };
const getJournalData = () => {
axios
.get("http://localhost:9000/")
.then((res) => {
setJournals(res.data);
})
.catch((err) => console.error(err));
};
這是 chrome-dev-tools 網路選項卡：
控制臺內容
React 在 localhost:3000 上作業 Express 在 locahost:9000 上作業
proxy:http://localhost:9000 在前端反應應用程式的 package.json 中添加
請告訴我是怎么回事，我該如何解決。謝謝
uj5u.com熱心網友回復：
如果不使用依賴項陣列，每次更改都會觸發您useEffect再次運行。
因此，每次重新渲染、每次更改狀態都會導致您創建另一個 Api 呼叫。
先說變體useEffect：
useEffect(() => {
// invoking on every re-render
})
useEffect(() => {
// invoking on component did mount (once)
}, [])
useEffect(() => {
// invoking on component did mount and with every change on counter
}, [counter])
所以，改變你的代碼：
useEffect(() => {
getJournalData();
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/342377.html
標籤：javascript 反应 MongoDB 表达 默恩