React Hook useEffect 缺少依赖项：'notes'，如何解决？

Question

我在这里使用了反应钩子，但我一直收到这个错误。

React Hook useEffect 缺少一个依赖项：'notes'。包括它或删除依赖数组。如果您只需要在 'setNotes' 调用 react-hooks/exhaustive-deps 中需要 'notes'，您也可以进行功能更新 'setNotes(n => ...)'

useEffect(() => {

    getNotes();

    const createNoteListner = API.graphql(

      graphqlOperation(onCreateNote)

    ).subscribe({

      next: noteData => {

        const newNote = noteData.value.data.onCreateNote;

        setNotes(prevNotes => {

          const oldnotes = prevNotes.filter(note => note.id !== newNote.id);

          const updatedNotes = [...oldnotes, newNote];

          return updatedNotes;

        });

        setNote("");

      }

    });

    const deleteNoteListner = API.graphql(

      graphqlOperation(onDeleteNote)

    ).subscribe({

      next: noteData => {

        const deleteNote = noteData.value.data.onDeleteNote;

        setNotes(prevNotes => {

          const updatedNotes = prevNotes.filter(

            note => note.id !== deleteNote.id

          );

          return updatedNotes;

        });

      }

    });

    const updateNoteListner = API.graphql(

      graphqlOperation(onUpdateNote)

    ).subscribe({

      next: noteData => {

        const updatedNote = noteData.value.data.onUpdateNote;

        setNotes(prevNotes => {

          const index = prevNotes.findIndex(note => note.id === updateNote.id);

          const updatedNotes = [

            ...notes.slice(0, index),

            updatedNote,

            ...notes.slice(index + 1)

          ];

          return updatedNotes;

        });

        setNote("");

        setId("");

      }

    });

    return () => {

      createNoteListner.unsubscribe();

      deleteNoteListner.unsubscribe();

      updateNoteListner.unsubscribe();

    };

  }, []);

Answer 1

在您的代码末尾的代码中有一个 }, [])如果您希望useEffect通过更改某些道具或状态来进行更新，例如，您可以在该数组中提及它， }, [props.sth])并且如果您useEffect每次需要删除该空数组时都希望调用，并且您的代码将以如下方式结束： })

Answer 2

您需要添加notes效果的依赖项。如果没有，则不会反映更改。...  return() =>{      createNoteListner.unsubscribe();      deleteNoteListner.unsubscribe();      updateNoteListner.unsubscribe();  }}, [notes])