我试图从MongoDB服务器获取Notes数组Notes数组的示例如下所示
{
"_id" : ObjectId("5f240b9ab414f1377c4155e0"),
"title" : "Hello",
"content" : "World !",
"__v" : 0
}
/* 2 */
{
"_id" : ObjectId("5f240d45b414f1377c4155e1"),
"title" : "aaaaaaaaaa",
"content" : "aaa",
"__v" : 0
}
现在函数getNote从MongoDB获取注释,然后使用useState传递数组,现在我的问题是:我希望函数getNote在React页面加载时自动调用。下面是函数getNote的代码
function getNote() {
axios
.get("/")
.then((response) => {
setFinalNoteDB(response.data);
})
.catch((err) => {
if (err) {
console.log("error in app.jsx");
}
});
一般的app.jsx代码如下所示
import React, { useState, Component } from "react";
import Header from "./Header";
import CreateArea from "./CreateArea";
import Footer from "./Footer";
import Note from "./Note";
import EnterNameTemplate from "./EnterNameTemplate";
import axios from "axios";
function App() {
const [finalNote, setFinalNote] = useState([]);
const [finalNoteDB, setFinalNoteDB] = useState([]);
// const [isNameThere, setIsNameThere] = useState(false);
function addNote(note) {
setFinalNote((prevNotes) => {
return [...prevNotes, note];
});
}
function deleteNote(id) {
setFinalNote((prevNotes) => {
return prevNotes.filter((singleNote, index) => {
return index !== id;
});
});
}
function getNote() {
axios
.get("/")
.then((response) => {
setFinalNoteDB(response.data);
})
.catch((err) => {
if (err) {
console.log("error in app.jsx");
}
});
}
return (
<div>
<Header />
<CreateArea addNote={addNote} />
{finalNoteDB.map((singleNote, index) => {
return (
<Note
key={index}
id={index}
title={singleNote.title}
content={singleNote.content}
deleteNote={deleteNote}
/>
);
})}
<Footer />
</div>
);
}
export default App;
希望你明白我的问题! 。
您可以使用useEffect钩子。 像这样
useEffect(() => {
let ignore = false;
if (!ignore) getNote()
return () => { ignore = true; }
},[]);
我使用了ignore变量来确保它不会在组件每次重新呈现时调用函数。
您可以使用UseEffect
钩子。 当不带参数地运行它时,它充当ComponentDidMount()
生命周期钩子。 只需在应用程序组件中的return语句上方添加该语句即可。
useEffect(() => {
getNote();
}, []);