reactjs - 使用 useEffect 反应钩子运行到无限循环

Question

 const addData = async () => {
    const result = await axios.post(
      "https://jsonplaceholder.typicode.com/todos?_limit=10",
      { id: uuidv4(), title: title, completed: false }
    );
    setTodos((prevTodos) => [...prevTodos, result.data]);
  };

  useEffect(() => {
    addData();
  }, [addData]);

我想在表单提交时调用函数“addData”

Answer 1

我想在表单提交时调用函数“addData”

如果那是您想要运行它的时候，那么我根本不明白您为什么需要 a useEffect。只需在表单提交时调用 addData。

const Example = (props) => {
  const [todos, setTodos] = useState([]);
  const addData = async () => {
    const result = await axios.post(
      "https://jsonplaceholder.typicode.com/todos?_limit=10",
      { id: uuidv4(), title: title, completed: false }
    );
    setTodos((prevTodos) => [...prevTodos, result.data]);
  };

  return (
    <form onSubmit={addData}>
      {/* etc */}
    </form>
  )
}

Answer 2

从 useEffect 中删除依赖项，如下所述，useEffect 将在其依赖项值更改时执行，并且您正在更改 useEffect 内部 useEffect 的相同依赖项，

useEffect(() => {
    addData();
  }, []);