다시 작성된 제목은 다음과 같습니다. React 상태의 초기 업데이트가 발생하지 않습니다.

Question

사용자가 한 번에 하나 이상의 이미지를 업로드할 수 있는 이미지 업로드 구성 요소가 있습니다. 나는 사용자가 이미지를 업로드할 때 항상 useState()를 사용하여 상태를 업데이트하려고 합니다. 그러나 상태는 즉시 업데이트되지 않았습니다. 다음 코드를 어떻게 업데이트하여 제대로 작동하게 할 수 있습니까?

으아아아

https://stackblitz.com/edit/react-ujcbjh?file=src%2FApp.js

Answer 1

기본이 아닌 유형과 함께 useState를 사용할 때마다 주의해야 합니다.

React 문서의 다음 두 페이지에서는 몇 가지 지침을 제공합니다.

• https://react.dev/learn/updating-objects-in-state
• https://react.dev/learn/updating-arrays-in-state

간단히 말하면, React는 Object.is 来确定在调用 setState를 사용하여 상태가 변경되었는지 확인합니다. 객체와 배열의 경우 내용이 변경되더라도 true를 반환할 수 있습니다.

Answer 2

React에서 useState 후크는 상태를 즉시 업데이트하지 않습니다. 상태 업데이트는 비동기식입니다. 즉, 상태 설정기 함수를 호출한 후 업데이트된 상태 값을 즉시 사용하지 못할 수도 있습니다.

이 문제를 해결하려면 useEffect 후크를 사용하여 파일 상태의 변경 사항을 수신하고 업데이트 시 필요한 작업을 수행할 수 있습니다. useEffect 후크를 포함하는 코드의 업데이트된 버전은 다음과 같습니다.

으아악

이 업데이트된 코드에서는 useEffect 후크의 두 번째 매개변수 배열에서 파일을 종속성으로 지정하여 파일 상태의 변경 사항을 수신하는 useEffect 후크를 추가했습니다. 파일 상태가 업데이트될 때마다 useEffect 콜백 함수 내부의 코드가 실행됩니다. useEffect 후크에서 업데이트된 파일 값을 사용하여 필요한 작업을 수행할 수 있습니다.

useEffect 후크를 사용하면 상태 업데이트 후 업데이트된 상태 값이 올바르게 기록되는 것을 볼 수 있습니다.