React Hook useEffect 缺少依賴項：'notes'，如何修復？

Question

我在這里使用了 react hook，ani 我一直收到這個錯誤。

React Hook useEffect 缺少一個依賴項：'notes'。 包括它或刪除依賴項數組。 如果您只需要在“setNotes”調用中的“notes”，您還可以進行功能更新“setNotes(n => ...)” react-hooks/exhaustive-deps

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])