使用 useEffect 反应钩子，它运行到无限循环答案

【问题标题】：With useEffect react hook its running to infinte loop使用 useEffect 反应钩子，它运行到无限循环
【发布时间】：2020-04-27 03:47:18
【问题描述】：

 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”

【问题讨论】：

将整个 addData 函数放入 useEffect 并调用它。您可能还需要将东西放在依赖数组中
我之前做过，但后来我无法从外部调用该 addData 函数

标签： reactjs react-hooks react-hook-form

【解决方案1】：

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

如果你想在那个时候运行它，那么我根本不明白你为什么需要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>
  )
}

【讨论】：

谢谢..我删除了useEffect，我做了与你类似的，但现在“id”没有生成一个唯一的..key =“201”在我提交表单时保持不变

【解决方案2】：

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

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

【讨论】：