使用React挂钩时无限循环

Question

过去几天我一直在学习做出反应，并且在使用useEffect挂钩时，由于设置状态变量而出现了infite循环。

谁能告诉我发生了什么事以及如何克服这个

这是我的代码

import React, { useState, useEffect } from "react";
import axios from "axios";

const TodoEntry = () => {

  const [todos, setTodos] = useState('');

  useEffect(() => {
    axios.get('http://localhost:5000/api/todos')
     .then(res => { setTodos(res.data); console.log(todos) })
     .catch(err => console.log(err))
  },[todos]);

  return (
    <div>
      <h1>Todo App</h1>
   </div>
  );
};

export default TodoEntry;

Answer 1

代码中的问题对

• 由于getTodos函数是useEffect钩子的依赖项，因此每次状态更新时，都会创建新的getTodos函数，然后触发useEffect钩子。 / p>

• 使用then语法时，不需要链接async-await函数。您可以等待axios.get(...)的结果。

要解决无限循环的第一个问题，请使用以下选项之一：

• 将getTodos函数包装在useCallback挂钩中。有关详细信息，请参见useCallback。

  由于getTodos函数调用displayTodos，因此您需要将其包装在useCallback钩子中，并在displayTodos钩子的依赖项数组中添加useCallback包装getTodos函数。我认为最好删除displayTodos函数并更新getTodos函数内部的状态

  const getTodos = useCallback(async () => {
     try {
        const res = await axios.get('http://localhost:5000/api/todos')
        setTodos(res.data);
     } catch(err) {
        console.log(err);
     }
  }, [setTodos]);
  

  演示

  

• 将代码放在getTodos钩子中的useEffect钩子中，并删除getTodos函数。

  useEffect(() => {
    axios.get("http://localhost:5000/api/todos")
     .then(res => setTodos(res.data))
     .catch(err => console.log(err));
  
  }, [setTodos]);
  

  演示

  

Answer 2

这是因为Function RenameTab ($ExcelFileName) { #Emplacement du fichier $excelFile = "C:\Users\Donosaure\Documents\Magister\" + $excelFileName + ".xlsx" #Ouverture d'excel $xldoc = New-Object -ComObject "Excel.Application" #Message de confirmation $xldoc.Visible = $false $xldoc.DisplayAlerts = $false #Ouverture du fichier $workbook = $xldoc.Workbooks.Open($excelFile) $inc = 1 $i=1 foreach ($worksheet in $workbook.Worksheets.count) { $worksheet = $workbook.Sheets.Item($i) $worksheet.Name = $inc $inc++ $i++ $workbook.SaveAs("C:\Users\Donosaure\Documents\Magister\1.xlsx") $workbook.Close() } $xldoc.Quit() } RenameTab("Magister") 调用的依赖项列表是一个函数。您可能打算添加待办事项数据本身。

useEffect