React: [버그] React onChange Synthetic / Proxy 이벤트가 재활용되고 있으며 핸들러가 디바운스될 때 문제가 발생합니다.

에 만든 2016년 09월 20일 · 3코멘트 · 출처: facebook/react

현재 행동은 무엇입니까?

0.14.7에서 확인되었지만 15.3.2에서도 오늘 발생합니다.

class Foo extends React.Component {
    render(){
    const handleChange = _.debounce(this.props.onChange, 500);
    return <input onChange={handleChange} />
  }
}

ReactDOM.render(<Foo onChange={e => console.log(e.target, e)} />, document.querySelector('div'));

e.target , null 받을 것으로 예상

디바운스 없이 예상대로 작동합니다. https://jsfiddle.net/dimitar/7ktbfetb/1/

https://github.com/facebook/react/commit/3285d834402a60d241188a1deacf8250b50239cf 관련 가능성 - https://github.com/facebook/react/blob/master/CHANGELOG.md#react -9

출처

DimitarChristoff

가장 유용한 댓글

해결 방법을 찾는 사람은 e.persist() 를 사용할 수 있습니다.

예를 들어 return <input onChange={e => handleChange(e.persist()||e)} />

DimitarChristoff 에 2016년 09월 20일

👍3

모든 3 댓글

해결 방법을 찾는 사람은 e.persist() 를 사용할 수 있습니다.

예를 들어 return <input onChange={e => handleChange(e.persist()||e)} />

DimitarChristoff 에 2016년 09월 20일

👍3

이것은 디바운스가 작동하는 방식 때문입니다. 다음 이벤트 루프에 대한 호출을 푸시하기 위해 setTimeout을 사용할 것입니다. 언급했듯이 풀링으로 인해 React는 이미 합성 이벤트를 풀로 반환하고 필드를 재설정했습니다. 리액트의 이벤트 핸들러 외부에 이벤트가 존재해야 하는 디바운스 또는 기타 다른 것을 사용하는 경우(예: 비동기 코드) 지속해야 합니다.

이것은 의도된 것이므로 지금 당장은 이에 대해 할 수 있는 일이 없습니다. #6190에는 잠재적으로 풀링을 제거하는 것에 대한 몇 가지 논의가 있습니다. 풀링은 명시적인 지속 없이 코드가 작동하도록 해야 합니다.

zpao 에 2016년 09월 21일

👍2

이것은 데이터 흐름, 불변성 및 부작용 방지를 해결하기 위해 설정된 바로 그 반응 원리와 반대입니다. 구성 요소에 개체를 전달하지만 실수로 누출을 생성할 수 있는 GC와 사용자를 불신하기 때문에 동일한 이벤트 루프 내에서 사용해야 하는 스냅샷일 뿐입니다...

그 당시에는 좋은 생각이었을지 모르지만 우리 중 일부는 적절한 GC가 가능한 에버그린 브라우저만 지원하면 됩니다. 아마도 이 접근 방식을 재고하는 동안 플래그/환경 변수를 설정하여 풀링을 끌 수 있습니다.

DimitarChristoff 에 2016년 09월 21일

👍1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React: [버그] React onChange Synthetic / Proxy 이벤트가 재활용되고 있으며 핸들러가 디바운스될 때 ​​문제가 발생합니다.

가장 유용한 댓글

모든 3 댓글

관련 문제

React: [버그] React onChange Synthetic / Proxy 이벤트가 재활용되고 있으며 핸들러가 디바운스될 때 문제가 발생합니다.