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”

如果那是您想要运行它的时间，那么我根本不明白为什么您需要一个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的相同依赖关系，

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

使用useEffect react钩子使其运行到无限循环

2 个答案: