时间戳

首页 > 解决方案 > 触发反应 useEffect

reactjs - 触发反应 useEffect

问题描述

我正在从组件渲染时工作的 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;

标签： reactjsfirebasefirebase-realtime-databaseuse-effect

解决方案

我会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 状态。

推荐阅读