在next js中添加、删除或编辑数据时如何获取数据？答案

【问题标题】：How do I fetch data when data is added, deleted or edited in next js?在next js中添加、删除或编辑数据时如何获取数据？
【发布时间】：2021-12-20 19:43:01
【问题描述】：

你能告诉我在下一个js中添加、删除或编辑数据时如何获取数据吗？我使用了useEffect，使用了一个状态来运行useEffect，但在我的情况下它不能正常工作，只有当我添加数据时，才会触发useEffect函数。但在编辑或删除中，它不是。我使用了多个组件。那么，我该如何实现呢？（没有状态触发 useEffect 功能）。提前致谢！

const [added, setAdded] = React.useState(0);

React.useEffect(() => {
  async function getTodos() {
    const todosCol = collection(db, "todos");
    const todoSnapshot = await getDocs(todosCol);
    const todoList = todoSnapshot.docs.map((doc) => doc.data());

    setTodos(todoList);
  }
  getTodos();
  console.log("Use effect ran!!!");
}, [added]);

【问题讨论】：

代码如何知道数据何时被添加、删除或编辑？
我在add函数里做这个，setAdded(added + 1);
那么删除和编辑的数据呢？
这是问题伙伴，删除功能在另一个组件中:(
你的代码结构很混乱。您不想在 useEffect 中定义异步函数。该调用应该类似于/lib/getTodos.js，您在useEffect 内加载await。这可能会消除一些副作用。

标签： javascript reactjs next.js frontend react-component

【解决方案1】：

我认为您的实现需要重构。

问题是可变变量和不可变变量。但是，如果您希望这段代码正常工作，只需将添加作为属性存储在 state 中，以便 React 可以跟踪更改。

类似这样的：

const [state, setState] = useState({added: 0});

【讨论】：

我不想用状态来触发useEffect函数。有没有其他办法？

【解决方案2】：

我深信不疑。 您必须使用 Redux 或任何其他状态管理工具来实现此目的。 :)

【讨论】：