从 React 组件调用模块化自定义 javascript 模块 function 两次。 为什么会被调用两次？ 场景如下图：

Question

Hope you all are doing great. I have started learning React and I have hit a road blocker and I kind of in need of your expertise here.

So the situation is like below:

When I send a request to react server I can see in my console when I am trying to log the data in fetchTaskList method, the data is being printed twice whereas I have called the method only once and I am not using hooks explicitly so far.

Could you please help me understand why this is happening? < I am a noob in JS and React. so if you could please explain in detail I will be able to understand/>

Thank you!

file structure of my project: file structure of project

App.js:

import Wrapper from "./components/Wrapper";
import "./App.css";

function App() {
  return (
    <>
      <Wrapper />
    </>
  );
}

export default App;

Wrapper.js:

import Canvas from "./functional/Canvas";

const Wrapper = (props) => {
  return <Canvas />;
};

export default Wrapper;

Canvas:

import { useEffect, useRef, useState, useContext } from "react";
import Card from "../ui/Card";
import Input, { NumberInput } from "../ui/Input";
import Button from "../ui/Button";
import { storeData, fetchTaskList } from "./Actions";

import style from "./canvas.module.css";
import Taskpane from "../ui/Taskpane";

import TaskContext from "../context/task-context";

let content = "init";
const Canvas = (props) => {
  // const [refresh, setRefresh] = useState(true);

  const ctx = useContext(TaskContext);
  const task = useRef();
  const priority = useRef();
  const timestamp = useRef();

  const addData = () => {
    storeData({
      task: task.current.getValue(),
      priority: priority.current.getValue(),
      date_: timestamp.current.getValue(),
    });
    task.current.setValue();
    priority.current.setValue();
    timestamp.current.setValue();
    // setRefresh(false);
  };

  let from_db = fetchTaskList(ctx.context_storage);
  console.log(from_db);
  content = <Taskpane className={style["task-container"]} task={from_db} />;

  return (
    <>
      <Card className={style["input__container"]}>
        <Input
          type="text"
          className={style["input-style__textbox"]}
          placeholder="Your activity.."
          ref={task}
        />
        <NumberInput
          placeholder="Priority"
          className={style["input-style__NumberInput"]}
          min="1"
          max="5"
          step="1"
          ref={priority}
        />
        <Input
          type="date"
          className={style["input-style__DateInput"]}
          placeholder="Pick a date"
          ref={timestamp}
        />
        <Button className={style["input-btn__add"]} onClick={addData}>
          Add
        </Button>
        {/* {content} */}
      </Card>
      {/* <Taskpane className={style['task-container']}>No task found.</Taskpane> */}
      {content}
    </>
  );
};

export default Canvas;

Actions.js:

import { useContext } from "react";

const Actions = (props) => {};
export default Actions;

const storeData = async function (data) {
  try {
    const response = await fetch(
      "https://mark-i-cf86f-default-rtdb.asia-southeast1.firebasedatabase.app/test_database.json",
      {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
    if (!response.ok) {
      console.log("Error occured!");
      return;
    }
  } catch (e) {
    console.log("Exception occured!");
  }
};

const fetchTaskList = (context_storage) => {
  try {
    fetch(
      "https://mark-i-cf86f-default-rtdb.asia-southeast1.firebasedatabase.app/test_database.json"
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        if (context_storage === null) {
          console.log(data);
        }
      });
  } catch (err) {
    console.log("ERROR Occured!");
  }
  return "No task found";
};

export { storeData, fetchTaskList };

Answer 1

i think what's happening is that you are logging the data once in the fetchTaskList function:

if (context_storage === null ){
            console.log(data);
        }

and again when you call it.

let from_db = fetchTaskList(ctx.context_storage);

console.log(from_db);

you can refactor your fetchTaskList function to something like this:

const fetchTaskList = async (context_storage) => {

try{
    let response = await fetch('https://mark-i-cf86f-default-rtdb.asia-southeast1.firebasedatabase.app/test_database.json');

    let data = await response.json();

    return data;
    
}catch(err){
    console.log("ERROR Occured!");
}
return "No task found";

}

async/await is another way to deal with promises.

Answer 2

The data is displaying twice because you are calling console.log on the data twice.

Once inside of the function of Action.js and then again immediately after you call the function inside of Canvas.js. That is why you are seeing the data twice in the console.