使用useEffect的无限取循环问题

Question

我在useEffect()中获取数据时遇到了问题。我可以在开发工具中看到，fetch在一个无限循环中被调用。

我是React的新手，所以也许这是一个简单的问题。我试过查找其他有同样问题的人，但似乎无法与我的代码建立联系。

代码如下。

export function Category(){
const [categories, setCategories] = useState([]);
useEffect(() => {
fetch('https://localhost:5001/api/Category')
.then(response => response.json())
.then(data => 
setCategories(data));
return () => {

}
})
const renderCategories  = (cats) => {
return (
<Table ClassName= "mt-4" striped bordered hoved size= "=sm">
<thead>
<tr>
<th> Id: </th>
<th> Category Name: </th>
<th> Options </th>
</tr>
</thead>
<tbody>
{cats.map(cats=>
<tr key = {cats.categoryId}> 
<td> {cats.categoryId}</td>
<td> {cats.name}</td>
</tr>)}                           
</tbody>
</Table>
)
}
return(
<div>
{renderCategories(categories)}               
</div>
)    
}

Answer 1

useEffect在state发生变化时被调用。在代码中，在useEffect中调用setCategories来更改categories状态。这个动作会触发useEffect本身进入一个无限循环。

对于使用hooks学习React 17的新手甚至以前的React Class开发人员来说，这是一个常见的问题。为了避免这种情况，使用方括号[]像@Chris G现在是可以的，但它不是一个很好的做法，当缩放，因为你只是技巧React运行useEffect一次。

Dan Abramov建议使用useReducer来管理useEffect之外的状态。这是他的一篇很棒的文章，解释了useEffect的每个角落。让我们倒点咖啡，看看它，因为它和一本书一样长:https://overreacted.io/a-complete-guide-to-useeffect/