触发反应 useEffect答案

【问题标题】：Trigger react useEffect触发反应 useEffect
【发布时间】：2021-08-29 02:05:37
【问题描述】：

我正在从一个 firebase 数据库中获取数据，它在组件呈现时工作，但当我的数据库中有新条目时，我无法再次获取它。

我尝试过的

我尝试将状态传递给 useEffect 的依赖数组，并且每次提交表单时都更改了该状态（那是我的数据库中有新条目的时间）

应用程序

    function App() {
  const [showForm, setShowForm] = useState(true);
  const [tasks, setTasks] = useState([]);
  const [isSubmitted, setIsSubmitted] = useState(true);

  //Fetch tasks from server
  const fetchData = () => {
    fetch(
      "https://react-task-tracker-8e519-default-rtdb.firebaseio.com/tasks.json"
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        const tasks = [];
        //Convert the data to an array so i can map over it
        for (const key in data) {
          const task = {
            id: key,
            ...data[key],
          };

          tasks.push(task);
        }

        setTasks(tasks);
      });
  };
  useEffect(() => {
    fetchData();
  }, [isSubmitted]);

  //Show/Hide form
  const onAddHandler = () => {
    setShowForm(!showForm);
  };

  const formSubmitted = () => {
    setIsSubmitted(!isSubmitted);
    console.log(isSubmitted);
  };
  return (
    <Container>
      <Header click={onAddHandler} isShown={showForm}></Header>
      {showForm ? <Form fs={formSubmitted}></Form> : ""}
      <Tasks tasks={tasks}></Tasks>
    </Container>
  );
}

export default App;

表格

    function Form(props) {
  const [task, setTask] = useState();
  const [dayTime, setDayTime] = useState();
  const [reminder, setReminder] = useState();

  //Posting Form data to firebase (DUMMY API)
  const postFormData = (fullTask) => {
    fetch(
      "https://react-task-tracker-8e519-default-rtdb.firebaseio.com/tasks.json",
      {
        method: "POST",
        body: JSON.stringify(fullTask),
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
  };

  //Make an object of form data
  const onSubmit = (e) => {
    e.preventDefault();
    const fullTask = {
      task: task,
      dayTime: dayTime,
      reminder: reminder,
    };

    //Post func call
    postFormData(fullTask);

    props.fs();
    //Field clearing
    setTask("");
    setDayTime("");
    setReminder("");
  };

  return (
    <AddForm onSubmit={onSubmit}>
      <FormControl>
        <Label>Task</Label>
        <Input
          type="text"
          placeholder="Add Task"
          onChange={(e) => setTask(e.target.value)}
          value={task}
          required
        ></Input>
      </FormControl>

      <FormControl>
        <Label>Day & Time</Label>
        <Input
          type="text"
          placeholder="Add Task"
          onChange={(e) => setDayTime(e.target.value)}
          value={dayTime}
          required
        ></Input>
      </FormControl>

      <FromControlCheck>
        <CheckLabel>Set Reminder</CheckLabel>
        <CheckInput
          type="checkbox"
          onChange={(e) => setReminder(e.currentTarget.checked)}
          value={reminder}
        ></CheckInput>
      </FromControlCheck>

      <Submit type="submit" value="Save Task"></Submit>
    </AddForm>
  );
}

export default Form;

【问题讨论】：

标签： reactjs firebase firebase-realtime-database use-effect

【解决方案1】：

我会将fetchData 作为道具传递给<Form>。提交后，我会调用它。

表格

const onSubmit = async (e) => {
    e.preventDefault();
    const fullTask = {
        task: task,
        dayTime: dayTime,
        reminder: reminder,
    };

    //Post func call
    await postFormData(fullTask);

    await props.fetchData();
    //Field clearing
    setTask("");
    setDayTime("");
    setReminder("");
};

然后移除 isSubmitted 状态。

【讨论】：

您好！它显示任务，但它有点错误。例如我输入了一个输入，提交它没有任何反应。我放了另一个，提交它而不是两个都出现。
所以，我从 useEffect 中删除了 []，现在它可以工作了，谢谢你的帮助！

【解决方案2】：

尝试将“Id”值更改为“id”。尝试使其与“fecthData”函数中 id 的键名相同。

【讨论】：

【解决方案3】：

我认为这可以解决您的问题

function App() {
  const [showForm, setShowForm] = useState(true);
  const [tasks, setTasks] = useState([]);
  const [isSubmitted, setIsSubmitted] = useState(false);

  //Fetch tasks from server
  const fetchData = () => {
    fetch(
      "https://react-task-tracker-8e519-default-rtdb.firebaseio.com/tasks.json"
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        const tasks = [];
        //Convert the data to an array so i can map over it
        for (const key in data) {
          const task = {
            id: key,
            ...data[key],
          };

          tasks.push(task);
        }

        setTasks(tasks);
      });
  };
  useEffect(() => {
    if (isSubmitted) {
       fetchData();
       setIsSubmitted(false);
    }
  }, [isSubmitted]);

  //Show/Hide form
  const onAddHandler = () => {
    setShowForm(!showForm);
  };

  const formSubmitted = () => {
    setIsSubmitted(true);
    console.log(isSubmitted);
  };
  return (
    <Container>
      <Header click={onAddHandler} isShown={showForm}></Header>
      {showForm ? <Form fs={formSubmitted}></Form> : ""}
      <Tasks tasks={tasks}></Tasks>
    </Container>
  );
}

export default App;

【讨论】：