为什么这个React组件无限渲染?

Question

我有一个问题与这个react组件在这里:

import React, { useState, useEffect } from 'react'
import StickyNote from './StickyNote';
function StickyNotes() {
const [stickyNotes, setStickyNotes] = useState([]);
useEffect(() => {
console.log("Here")
fetch("http://localhost:8080/notes")
.then(res => res.json())
.then(data => setStickyNotes(data))
.catch(error => console.log('Error: ', error))
}, [stickyNotes])


return (
<div className="d-flex flex-wrap justify-content-center m-5" >
{stickyNotes.map((note) => <StickyNote title={note.title} body={note.body} id={note.id} key={note.id} />)}
</div>
)
}
export default StickyNotes

我试图得到所有的笔记，所以我正在做一个get请求到我的后端。当我第一次运行我的应用时，我注意到我的组件一直在无限渲染。我知道我可以为依赖传递一个空数组，这种行为将停止。问题是，我需要useEffect钩子在每次stickyNotes状态发生变化时运行，这样当用户创建一个笔记时，屏幕就会更新新的笔记。如果我传入一个空数组，这就行不通了。我的印象是，将stickyNotes变量传递到依赖数组中只会在此值发生变化时运行useEffect，但即使在stickyNotes未更新时也会运行。是什么导致它无限运行?

Answer 1

它是无限渲染，因为useEffect有stickyNotes作为依赖，你也在useEffect回调中更新stickyNotes。这使得useEffect无限运行。为了修复，你可以做一件事，做一个单独的函数来获取笔记，并在stickyNotes更改时调用它，并在useEffect中调用它，也没有依赖关系。

import React, { useState, useEffect } from 'react'
import StickyNote from './StickyNote';
function StickyNotes() {
const [stickyNotes, setStickyNotes] = useState([]);
const getNotes = () =>{
//call this function whenever you are changing stickyNotes.
fetch("http://localhost:8080/notes")
.then(res => res.json())
.then(data => setStickyNotes(data))
.catch(error => console.log('Error: ', error))
}
useEffect(() => {
getNotes();
}, [])


return (
<div className="d-flex flex-wrap justify-content-center m-5" >
{stickyNotes.map((note) => <StickyNote title={note.title} body={note.body} id={note.id} key={note.id} />)}
</div>
)
}
export default StickyNotes