내 React 앱에서 '불변 위반: 객체가 React 하위 항목으로 유효하지 않습니다'라는 메시지가 나타나는 이유는 무엇입니까?-JS 튜토리얼-php.cn

내 React 앱에서 '불변 위반: 객체가 React 하위 항목으로 유효하지 않습니다'라는 메시지가 나타나는 이유는 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-08 04:00:02

원래의

327명이 탐색했습니다.

Why Am I Getting

React 오류: 객체를 하위 항목으로

React 애플리케이션에서 "불변 위반: 객체가 React 하위 항목으로 유효하지 않습니다." 오류가 발생하는 경우 객체를 구성 요소의 하위로 렌더링하려고 합니다. 이 문제는 하위 항목이 문자열, 숫자 또는 요소를 기대했지만 대신 개체를 수신할 때 발생합니다.

주어진 예에서 렌더링 메서드의 지도 함수 내에서 this.onItemClick.bind(this, item ) 전체 이벤트 개체를 onClick 핸들러에 대한 속성으로 잘못 전달합니다. 결과적으로 onClick 이벤트 핸들러는 속성이 포함된 이벤트를 객체로 수신하여 오류를 발생시킵니다.

이 문제를 해결하려면 지도 내부의 화살표 기능을 사용하여 클릭 이벤트를 처리하고 필요한 인수를 전달할 수 있습니다. :

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={(e) => this.onItemClick(e, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

로그인 후 복사

또는 이벤트 개체를 보존하려면 필요한 매개변수만 바인딩하면 됩니다.

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

로그인 후 복사

위 내용은 내 React 앱에서 '불변 위반: 객체가 React 하위 항목으로 유효하지 않습니다'라는 메시지가 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!