: 이 합성 는 이이 with with with with with with with with with with with with with with with with에서 발생하는 됩니다. : 이 합성 는 이이 with with with with with with with with with with with with with with with with에서 발생하..

: 이 합성 는 이이 with with with with with with with with with with with with with with with with에서 발생하는 됩니다.

클래스에 대해 간단한 리액트 리덕스 작업 예제를 작업하고 있는데 체크박스를 켜고 끌 때마다 콘솔에 몇 가지 경고 메시지가 나타납니다.

다음 이미지에서 경고를 볼 수 있습니다.

구글에서 경고 메시지를 검색해 봤지만 효과가 있는 해결책을 찾을 수 없었습니다.또, 네이티브 이벤트의 모든 속성과 DOM 요소에 액세스 하려고 하고 있는 것처럼 보이는 것이 눈에 띄었습니다.

입력 확인란이 있는 프레젠테이션 구성 요소의 코드입니다.

class TodoItem extends React.Component {
  state = {
    isChecked: false
  };
  handleCheckbox = () => {
    this.setState({
      isChecked: !this.state.isChecked
    });
  };
  render() {
    const { todos, onItemClick } = this.props;
    const { isChecked } = this.state;
    return (
      <div>
        <ul>
          {todos.map((todo, id) => {
            return (
              <li key={id} onClick={onItemClick}>
                <input
                  onChange={this.handleCheckbox}
                  type="checkbox"
                  checked={isChecked}
                />
                <label>
                  <span />
                  {todo.textInput}
                </label>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default TodoItem;

Code Sandbox에도 예를 업로드했습니다.https://codesandbox.io/s/k0mlxk1yqv

이 오류를 반복하려면 항목을 작업관리 목록에 추가하고 확인란을 눌러 여러 번 선택 및 선택 해제해야 합니다.

이 경고 사인이 계속 표시되는 이유와 비활성화 방법을 알고 계신 분이 계시다면 입력해 주시면 감사하겠습니다.

은, 「 」가 입니다.eventonItemClick는 비동기 컨텍스트에서 사용됩니다.
Andre Lemay가 말했듯이 로컬 변수에 요구를 할당하고 참조해야 합니다.

제 경우, 저는 다음과 같은 코드를 가지고 있었습니다.

handleInput = e => { // <-- e = synthetic event
  this.setState(state => ({ // <-- asynchronous call
    data: {
      ...state.data,
      [e.target.name]: e.target.value // <-- this was causing the warnings (e.target is in an asynchronous context)
    }
  }));
};

그 후, 다음과 같이 변경했습니다.

handleInput = e => {
  const { name, value } = e.target; // <-- moved outside asynchronous context

  this.setState(state => ({
    data: {
      ...state.data,
      [name]: value
    }
  }));
};

두 가지 방법을 시도해 볼 것을 제안합니다.

첫 번째 변경

onChange={this.handleCheckbox}

로.

onChange={() => this.handleCheckbox()}

안 될 ' Checkbox'handle checkbox'를 합니다.event.persist();다음과 같이 합니다.

handleCheckbox = (event) => {
  event.persist();
  this.setState({
    isChecked: !this.state.isChecked
  });
};

조금 늦었을 수도 있지만, 저는 같은 문제를 발견하고 아담 올로프의 대답보다 더 나을 것 같은 방법으로 해결했습니다.어느 쪽 답변도 질문에 직접 적용할 수 있다고는 생각하지 않지만, 합성 이벤트나 체크박스에 대해 검색하면 이 정보가 뜨기 때문에 다른 곳과 마찬가지로 좋은 장소입니다.

Adam은 기본적으로 Respect가 SyntheticEvent 객체의 모든 속성을 클리어할 것이라는 믿음이 옳다고 생각합니다(React가 객체를 재사용하고 있다는 것을 알려주기 때문에 이는 타당합니다).

단, 오브젝트 전체가 필요하지 않는 한 매뉴얼에 따르면 event.persist()를 호출하는 것은 최적의 솔루션이 아닙니다(아마도 타당한 이유로 오브젝트를 풀에서 삭제했을 것입니다).

이벤트 속성에 비동기 방식으로 액세스하려면 이벤트에 대해 event.persist()를 호출해야 합니다.이 경우 가상 이벤트가 풀에서 삭제되고 이벤트에 대한 참조가 사용자 코드로 유지됩니다.

event 객체의 값이 1개 또는2개만 필요한 경우 이러한 값을 로컬 변수에 할당하고 다음과 같이 함수 내부의 로컬 변수를 참조할 수 있습니다.

<input type="checkbox" onChange={(event) => {
    let checked = event.currentTarget.checked; //store whatever values we need from from the event here
    this._someOtherFunction(checked)
} />

이렇게 하면 이벤트 데이터에 의존하는 비동기 작업을 피하기 위해 코드를 재구성할 필요가 없으며, React가 이벤트 풀에서 원하는 작업을 수행할 수 있으므로 잠재적인 성능 영향을 걱정할 필요도 없습니다.

여기서도 마찬가지로 기능 컴포넌트, 머티리얼 UI를 설정합니다.<Textform />입력.

그 위에 있는 남자는event.persist();감사합니다만, 첫 번째 제안은 눈에 띄는 영향은 없었습니다.클래스 컴포넌트가 아닌 기능 컴포넌트를 사용하고 있기 때문인지 잘 모르겠습니다.(클래스 컴포넌트는 이제 사용하지 않고 후크만 사용합니다.)

또한 event.persist()를 사용하기 위해 권장되는 경고 정보에 유의하십시오.문제는 onChange를 사용하여 폼 입력을 캡처하고 입력 내용을 내 상태로 저장하다가 두 번째 또는 세 번째 문자가 지나면 오류가 발생하고 앱도 크래시됩니다.

이전:

    const handleChange = (e) => {
    
    setState((form) => ({
      ...form,
      [e.target.name]: e.target.value,
    }));
  };

그 후:

    const handleChange = (e) => {
    e.persist();
    setState((form) => ({
      ...form,
      [e.target.name]: e.target.value,
    }));
  };

이 방법은 유사한 문제에 대한 올바른 해결책인 것 같습니다.체크박스를 사용하지 않고 폼 입력인 Material-UI를 사용하고 있었습니다.<TextField />한 줄만 제거할 수 있습니다.

e.persist();

코드가 다시 고장나면, 다시 추가합니다. 충돌하지 않고 경고도 하지 않고 모든 것이 정상입니다.

원어민에게 반응하는 사람들에게요

나는 내비게이션에서 이 문제에 직면한다.

PersonalProductsScreen.navigationOptions=({navigation})=>{
const handleEditButton=navigation.navigate.bind(this,"EditProduct")
return {
    headerTitle:"My Products",
    headerRight:<CustomHeaderButton 
    iconName="ios-add"
    title="Add"
    iconSize={26}
    color={colors.bright}
    onPress={handleEditButton}
    />
}

}

내가 사용한 방법에 주의를 기울인다.네비게이션 방법을 묶으려고 했어요

다음은 리팩터입니다.

const handleAddButton=()=>navigation.navigate("EditProduct")

언급URL : https://stackoverflow.com/questions/49500255/warning-this-synthetic-event-is-reused-for-performance-reasons-happening-with