为什么这是反应组件呈现无限？

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

我试图得到所有的笔记，所以我做了一个得到的要求，我的后端。当我第一次运行我的应用程序时，我注意到我的组件一直在无限地呈现。我知道我可以为依赖传递一个空数组，这个行为就会停止。问题是，每次更改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