React useEffect жалуется на отсутствие зависимости даже после деструктуризации

Question

Прежде чем вы пометите это как дубликат - пожалуйста, поймите, что я пытался следить за большинством статей здесь, на SO, но ни одна из них, похоже, не помогает мне, возможно, я что-то упускаю или у меня сегодня пукание. Так что извините, что снова задаю этот вопрос.

В моем компоненте у меня есть следующая суть кода.

  let { teamid } = props.currentTeam
  useEffect(() => {
    if (teamid) {
      props.teamMembers(teamid);
    }
  }, [teamid]);

Как вы можете убедиться из приведенного выше кода, я использую только teamid в своем useEffect. Я не использую весь объект props. Однако React все еще жалуется на это сообщение

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps

Пожалуйста, дайте мне знать, что я здесь делаю не так. Любая помощь будет оценена по достоинству.

Answer 1

В основном то, что react-hooks/exhaustive-deps предупреждение говорит вам, что вы все еще ссылаетесь на props объект внутри эффекта, которым вы являетесь - вы не полностью разрушаете элемент props:

let { teamid } = props.currentTeam
useEffect(() => {
  if (teamid) {
    props.teamMembers(teamid); // PROPS STILL REFERENCED - ISSUE
  }
}, [teamid]); // NO DEPENDENCY FOR PROPS - ISSUE

Разрушить props объект полностью и включить все зависимости - с этим props объект может обновляться, и если currentTeam или же teamMembers свойства не меняются, то и ваш эффект тоже:

const { currentTeam, teamMembers } = props // FULLY DESTRUCTURED
  
useEffect(() => {
  if (currentTeam.teamid) {
    teamMembers(currentTeam.teamid)
  }
}, [currentTeam.teamid, teamMembers]) // NO PROPS DEPENDENCIES

Answer 2

Попробуй пройти currentTeam и teamMembers к useEffect

let { currentTeam, teamMembers } = props

  useEffect(() => {
    if (currentTeam.teamid) {
      teamMembers(currentTeam.teamid);
    }
  }, [currentTeam, teamMembers]);