useState 버그 파트 I: 예기치 않은 상태 업데이트.

상태가 예기치 않은 방식으로 업데이트되는 경우가 발생했습니까? 이 질문을 명심하십시오.

개발자의 삶에서 가장 실망스러운 일 중 하나는 프로젝트를 막 시작하고 붐을 일으킬 때입니다! 버그가 발생하고 그의 마음에 일어나는 일은 다음과 같습니다.

"우, 이건 작은 버그일 뿐이고 그냥 고치고 프로젝트를 계속하면 괜찮을 것 같아요."

그래서 다음으로 그가 할 수 없을 때까지 버그를 수정하려고 시도하고 시도하며 즉시 해당 프로젝트 작업에 대한 동기를 잃고 그의 하루는 손실이 됩니다.

이 useState 버그 시리즈 파트에서는 ​​useState의 가장 일반적인 문제와 해결 방법에 대해 이야기하겠습니다.

상태가 예기치 않은 방식으로 업데이트되는 경우가 발생했습니까? 다시 질문이 온다. 그렇다면 많은 reactjs 개발자가 내부에서 어떻게 작동하는지 이해하지 않고 useState를 사용하기 때문입니다. 이 작은 앱의 예를 들어 보겠습니다.


이것은 우리가 시연을 위해 사용할 매우 간단한 앱이며, 증가 버튼을 클릭하면 상태와 h1의 데이터를 업데이트하고 증가를 클릭하면 2초 후에 수행합니다. 비동기 버튼.

증가를 클릭하면:


increment asynchronously 를 클릭하면 2초간 기다린 후 다음과 같이 표시됩니다.


따라서 버튼은 기본적으로 다른 시간 간격 내에서 동일한 작업을 수행합니다.

그래서 여기서 보여주고 싶은 것은 발생할 수 있는 문제입니다.

먼저 내가 사용한 setTimeout 함수는 해결된 후 상태가 업데이트되는 http 요청과 같은 비동기 작업을 시뮬레이트하는 것이었습니다.

비동기식 증가 버튼을 먼저 한 번 클릭한 다음 두 번 또는 세 번 정도 한 번 이상 증가 버튼을 즉시 클릭하면 문제가 발생합니다.

어떻게 될 것 같나요? 결과는 다음과 같습니다.
비동기 버튼을 클릭합니다.



물론 2초가 지나지 않으면 아무 일도 일어나지 않는다.

하지만: 그 2초 동안 증가 버튼을 정확히 세 번 클릭했습니다.


그리고 2초가 지나면 결과는 다음과 같습니다.


하지만 왜? 이미 값으로 3이 있었지만 값이 다시 1로 변경되었습니다.

그래서 여기에 설명이 있습니다: 비동기적으로 증가를 클릭하고 javascript가 'setNumber(숫자 +1)' 행에 도달하면 현재 값을 저장하고 2초가 지나면 저장된 값에 1을 추가하고 예제에서 위의 숫자는 O이므로 1을 더하고 결과는 1입니다.

이로 인해 예기치 않은 동작이 발생할 수 있으며 문제가 있는 위치를 인식하지 못하면 많은 개발자를 좌절시킬 수 있습니다.

그래서 그것을 해결하는 방법 :

솔루션: useState 후크에서 콜백 함수를 사용하여 업데이트를 사용하십시오.

방법은 다음과 같습니다.

const increaseAsynchronously = () => {
    setTimeout(() => {
      setNumber(prevNumber => setNumber(prevNumber + 1));
    },2000)
  }

우리는 콜백 함수를 제공했고 상태의 현재 값을 나타내는 하나의 매개변수를 사용하므로 이 경우 완벽하게 작동합니다. 이전에 수행한 작업을 반복해 보겠습니다.

비동기 버튼을 클릭합니다.


물론 2초가 지나지 않으면 아무 일도 일어나지 않는다.

하지만: 그 2초 동안 증가 버튼을 정확히 세 번 클릭했습니다.


그리고 2초가 지나면 결과는 다음과 같습니다.


따라서 작동합니다. 이제 결과가 예상한 결과임을 알 수 있습니다.

고맙습니다! 이것이 누군가를 돕기를 바랍니다.

토론 섹션에서 이 게시물에 대해 토론하고 알고리즘에 대해 좋아요를 누릅시다.