使用 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

I want to call the function "addData" on form submit

如果那是你想要运行它的时候，那我根本不明白你为什么需要 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();
  }, []);

使用 useEffect 反应挂钩它是运行无限循环

With useEffect react hook its running to infinte loop

reactjs

react-hooks

react-hook-form

使用 useEffect 反应挂钩它是 运行 无限循环

With useEffect react hook its running to infinte loop

reactjs

react-hooks

react-hook-form

使用 useEffect 反应挂钩它是运行无限循环