React JS 页面加载时如何自动调用函数？（2020 年）

Question

我正在尝试从 MongoDB 服务器获取注释数组 注释数组的示例如下所示

{
    "_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;

希望你能明白我的问题！。

Answer 1

您可以使用 useEffect 挂钩。 像这样

 useEffect(() => {
let ignore = false;

if (!ignore)  getNote()
return () => { ignore = true; }
},[]);

我使用了忽略变量来确保它不会在每次组件重新渲染时调用该函数。

Answer 2

你可以用一个useEffect钩子。当您不带参数运行它时，它充当componentDidMount()生命周期挂钩。只需将其添加到应用程序组件中的 return 语句上方即可。

useEffect(() => {
  getNote();
}, []);