배열에 있는 이름의 useEffect를 반복합니다.

Question

저는 이 웹사이트에서 이 연습을 찾았습니다. 저는 또한 React에서 후크를 배우고 있기 때문에 이것을 테스트하고 있습니다.

배열에 이미 있는 이름과 동일한 이름을 입력하면 왜 useEffect 실행이 중지되는지 이해가 되지 않습니다.

중복된 이름은 건너뛰고 다음 이름으로 넘어가야 하지 않나요? 아니면 내가 뭔가 잘못하고 있는 걸까요?

let users = ['올리버', '토마스', '조지', '조지', '윌리엄']
기본 함수 내보내기 App() {
  const [index, setIndex] = useState(0);
  console.log('렌더');
  useEffect(() => {
    setTimeout(() => setIndex(index => index + 1), 1000)
    console.log('안녕하세요' + 사용자[색인]);
    console.log('부작용이 실행됩니다!');
    if (색인 === users.length - 1) {
      반품
    }
  }, [사용자[색인]])
}

Answer 1

루프의 부작용: useEffect에서 setTimeout 및 setIndex를 사용하는 방식으로 인해 예기치 않은 동작이 발생할 수 있습니다. useEffect는 각 렌더링 후에 실행되며 setTimeout 콜백에서 직접 인덱스 상태를 사용하면 콜백이 생성될 때 클로저가 상태 값을 캡처하기 때문에 문제가 발생할 수 있습니다.

배열 요소 액세스: 인덱스를 사용하여 사용자 배열의 요소에 액세스하려고 하지만 useEffect 및 지연의 비동기 특성으로 인해 배열의 범위를 초과할 수 있습니다.

으아악