尝试让应用程序在 POST 上自动从 API 获取

Question

基本上，我正在创建一个具有 CRUD 操作的 ToDo 应用程序，但是，当我从 MongoDB 发布或删除文档时，我希望我的钩子能够自动获取结果。我觉得这是一个简单的修复，我尝试了一些奇怪的事情，包括

useCallback

但似乎没有任何效果。这是我的钩子：

import { useCallback, useEffect, useState } from 'react';
import axios from 'axios';

export const useAPI = () => {
  const backendURL = '<InsertURL>.com/api/todos';
  const [retrievedData, setRetrievedData] = useState([]);

  //sends todo to database
  const postToDo = useCallback(async (newToDo) => {
    await axios
      .post(backendURL, newToDo)
      .catch((error) => console.log(error.message));
  }, []);

  //deletes a todo from the database
  const deleteToDo = async (todo) => {
    console.log(todo);
    await axios
      .delete(backendURL, todo)
      .catch((error) => console.log(error.message));
  };

  //gets todos from database
  useEffect(() => {
    const getToDos = async () => {
      await axios
        .get(backendURL)
        .then((fetchedData) => {
          setRetrievedData(fetchedData.data.todos);
        })
        .catch((error) => console.log(error.message));
    };
    getToDos();
  }, [postToDo]);

  return { retrievedData, postToDo, deleteToDo };
};

基本上，我希望调用

postToDo

，然后立即执行

getToDos

，而无需刷新页面。我想对

deleteToDo

使用同样的技术。

为什么

useCallback

？因为 ESlinter 告诉我，如果我将

postToDo

放入

getToDos

依赖项中，就这样做。我认为如果我将

postToDo

放入数组中，它会在调用函数时更新，但情况似乎并非如此。我还担心尝试太多奇怪的事情，因为当它自动执行很多次时，我不小心向我的数据库添加了 30 多个文档。

Answer 1

抽象出你的 React hooks，你可以使用

.then

Promise 语法（作为一个例子）来排序异步操作：

const postToDos = async (newToDo) => {
    await axios
      .post(backendURL, newToDo)
      .catch((error) => console.log(error.message))
}

const getToDos = async () => {
      await axios.get(backendURL)
}

postToDos(newToDo).then(getToDos).then(fetchedData => {
    setRetrievedData(fetchedData.data.todos)
})

或者，您可以将 async/await 语法组合到单个函数中

const postToDos = async (newToDo) => {
    await axios
      .post(backendURL, newToDo)
      .catch((error) => console.log(error.message))
}

const getToDos = async () => {
      await axios.get(backendURL)
}

const postAndGetToDos = async (newToDo) => {
    await postToDo(newToDo)
    var fetchedData = await getToDos()
    setRetrievedData(fetchedData.data.todos)
}

postAndGetToDos({/*new toDo object*/)
    

Answer 2

如果我没理解错的话，你只是想在删除帖子时取回数据，对吗？

我认为，你需要正确触发你的 useEffect 。

您首先需要修改一个包含待办事项的数组，以便您必须在

deleteToDo

中删除要从后端删除的项目，并将其传入

useEffect

。

 //gets todos from database
  useEffect(() => {
    const getToDos = async () => {
      await axios
        .get(backendURL)
        .then((fetchedData) => {
          setRetrievedData(fetchedData.data.todos);
        })
        .catch((error) => console.log(error.message));
    };
    getToDos();
  }, [postToDo, <TodoArray>]);