如何利用好useEffect的依赖去简化代码今天看到一篇next.js+strapi 做一个todoList的文章，地址

今天看到一篇next.js+strapi 做一个todoList的文章，地址如下strapi.io/blog/how-to… 作者是一名黑人小哥，方便起见，把代码贴在下面。

import Head from "next/head";
import { useEffect, useState } from "react";
import Header from "../components/header";
import AddTodo from "../containers/addTodo";
import TodoList from "../containers/todoList";
import axios from "axios";
export default function Home() {
  const [todos, setTodos] = useState([]);
  useEffect(async () => {
    const result = await axios.get("http://localhost:1337/todos");
    setTodos(result?.data);
  }, []);
  const addTodo = async (todoText) => {
    if (todoText && todoText.length > 0) {
      const result = await axios.post("http://localhost:1337/todos", {
        todoText: todoText,
      });
      setTodos([...todos, result?.data]);
    }
  };

const deleteTodoItem = async (todo) => {
    if (confirm("Do you really want to delete this item?")) {
      await axios.delete("http://localhost:1337/todos/" + todo.id);
      const newTodos = todos.filter((_todo) => _todo.id !== todo.id);
      console.log(newTodos);
      setTodos(newTodos);
    }
  };
  const editTodoItem = async (todo) => {
    const newTodoText = prompt("Enter new todo text or description:");
    if (newTodoText != null) {
      const result = await axios.put("http://localhost:1337/todos/" + todo.id, {
        todoText: newTodoText,
      });
      const moddedTodos = todos.map((_todo) => {
        if (_todo.id === todo.id) {
          return result?.data;
        } else {
          return _todo;
        }
      });
      setTodos(moddedTodos);
    }
  };
 return (
    <div>
      <Head>
        <title>ToDo app</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <main className="main">
        <AddTodo addTodo={addTodo} />
        <TodoList
          todos={todos}
          deleteTodoItem={deleteTodoItem}
          editTodoItem={editTodoItem}
        />
      </main>
    </div>
  );
}

从代码里可以看到，小哥在addTodo/deleteTodoItem/editTodoItem 用了不少代码去 setTodos，增还比较容易实现，但删改两项中，setTodos 还是挺麻烦的。但其实我们发现这个todoList的其实并不依赖todos里的数据，而是依赖后台strapi传过来的数据，各种方法也是对后台数据的修改，然后通过axios拿到数据再传入todos，所以我们只要在对todoList做出各种增删改之后，使useEffect更新，拿到最新的后台数据即可。所以我们可以在开头增加一行

const [count, setCount] = useState(0)

并把count 作为依赖传入uesEffect

useEffect(async () => {
    const result = await axios.get("http://localhost:1337/todos");
    setTodos(result?.data);
  }, [count]);

增删改的方法代码中，只要把setTodos部分的代码全部替换为

setCount(count+1)

就可以了，代码量直接减少9成，更是节约了很多脑细胞。