UseState는 항상 이전 값을 표시함

UseState는 항상 이전 값을 표시함

이 질문에는 이미 다음과 같은 해답이 있다.

useState 세트 메서드가 변경 내용을 즉시 반영하지 않음 (17개 답변)

닫힌2년 전.

이것은 모든 새로운 반응 개발자들 사이에서 인기 있는 질문이지만 나는 어떻게든 가능한 해결책 뒤에 숨겨진 논리를 이해할 수 없다.후크를 사용하여 상태 변수를 업데이트하고 업데이트 값을 읽어보려고 하지만 항상 새 값 대신 이전 값을 반환해.다음은 내 코드 실행 순서다.

onClick={setTransactionAccountId}

버튼 클릭 시 아래 코드를 실행하고 상태를 업데이트하지만console.log옛 가치를 나타내다

const [accountId, setAccountId] = useState(0);

const setTransactionAccountId = e => {
  console.log("Clicked ID:", e.currentTarget.value);
  setAccountId(e.currentTarget.value);
  console.log("accountId:", accountId);
};

콘솔 로그:

1. 첫 단추 클릭:

클릭 ID: 0 accountId: 0

2. 두 번째 단추 클릭:

클릭 ID: 1 accountId: 0

누가 나에게 이 행동의 이유와 그것을 어떻게 다루는지 말해줄 수 있을까?

accountId이 렌더는 업데이트되지 않았을 겁니다.다음 렌더가 업데이트될 때까지 기다려야 한다. accountId기능 구성 요소의 상단에만 채워지는 경우useState라고 불린다.넌 렌더링 중간이야.실제 값이 필요하면 계속 끌어다 놓으십시오.e.currentTarget.value.

대응 문서로부터

React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 일괄 처리할 수 있다.

이.props 및 this.state는 비동기적으로 업데이트될 수 있으므로 다음 상태 계산에 해당 값에 의존해서는 안 된다.

상태 업데이트는 비동기적으로 일괄 처리 및 업데이트될 수 있으므로 console.log()를 호출할 때 상태가 업데이트되지 않았을 수 있다.효과 후크를 사용하기 위한 다음 상담에서 보장된 업데이트 결과를 얻으십시오.

왜냐하면setState비동기적이다.실행 중console.log('accountId:', accountId)상태가 업데이트되기 전에 이전 상태 값을 계속 제공하십시오.비동기/대기자를 추가하면 문제가 해결된다.

const setTransactionAccountId = async (e) => {
    console.log('Clicked ID:', e.currentTarget.value)
    await setAccountId(e.currentTarget.value)
    console.log('accountId:', accountId)
}

참조URL: https://stackoverflow.com/questions/60438537/usestate-shows-previous-value-always