React: 버그 : onKeyDown의 관련없는 상태 업데이트가 onChange를 차단하고 제어 된 구성 요소를 중단합니다.

onKeyDown 처리기의 상태 업데이트가 이벤트를 중단하고 onChange 처리기가 호출되지 않도록하는 것처럼 보입니다. 제어 된 구성 요소는 사용자가 지시 한 내용 만 표시하기 때문에 (예제에서는 value 상태) 공백 문자가 나타나지 않습니다.

이 두 이벤트가 상호 작용하는 방식에서 이것은 나에게 버그처럼 보입니다.

cc @trueadm @gaearon 의 이벤트 시스템 전문성

안녕하세요, 저는 여기 새로 왔으며 React 아키텍처를 배우려고합니다.

@bvaughn 여기에 문제에 대해 찾은 것이 있습니다.

onKeyDown 이벤트는 입력이 수정되기 전에 트리거되는 것이 아니라 onChange 차단하지 않습니다. 기본적으로 onKeyDown 는 onChange 보다 onKeyUp 에서 발생하기 때문입니다.

이 특별한 경우 문제는 keyDown 에서 setCode 호출시 첫 dispatchAction _Fiber_에 새 문자없이 memoizedState 가 있다는 것입니다 (분명히) 그리고 추가 될 e . 결국 새 문자를 입력에 추가합니다. 그런 다음 useEffect() _same queue_ 내에서 dispatchAction 다시 트리거하지만 (큐인지 확실하지 않음) 업데이트 된 prop에 대해 알지 못합니다. 그 결과, 그 때 commitRoot , 그것이 복원 pendingProps 가 있었다 동일하다 memoizedState . 요컨대, 문자 (이 예에서는 공백)가 추가되고 즉시 이전 상태가 새 문자 (공백)없이 복원되므로 아무것도 추가하지 않는 것처럼 보입니다.

_same queue_ (?)를 사용하지 않는 예로서이 특정 예는 다음과 같습니다.

useEffect(() => {
    if (code === 'add') {
      setCount(c => c + 1)
    } else {
      setCount(c => c - 1)
    }
  }, [code, setCount])

다음과 같이 수정할 수 있습니다.

useEffect(() => {
    if (code === 'add') {
      setTimeout(() => setCount(c => c + 1), 0)
    } else {
      setTimeout(() => setCount(c => c - 1), 0)
    }
  }, [code, setCount])

작동합니다.

말이 되길 바랍니다.

이 동일한 문제가 발생하여 keydown 핸들러의 setTimeout에서 setState 호출을 래핑하여 문제를 해결했습니다.

이것이 React의 내부에서 다르게 작동해야하는 것인지 아니면이 오류가 개발자 측에서 더 큰 실수 나 나쁜 패턴을 가리키는 것인지 궁금합니다.