`render` 메소드에서 배열을 매핑할 때 'Invalid React Child' 오류가 발생하는 이유는 무엇입니까?

React 오류: 잘못된 React 하위

이 오류는 render 메서드가 잘못된 React 하위를 렌더링하려고 시도할 때 발생하며, 이는 반환 시 발생할 수 있습니다. 유효한 React 요소 대신 배열이나 객체.

귀하의 경우 지도 함수 내에서 직접 바인딩된 메서드 this.onItemClick.bind(this, item)를 참조하여 오류가 발생했습니다. 이 문제를 해결하려면 대신 화살표 함수를 사용해야 합니다.

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

    // ...
}</code>

화살표 함수는 this 값이 구성 요소 인스턴스에 바인딩되는 새 범위를 생성하여 onItemClick 함수에 액세스할 수 있도록 합니다.

오류 메시지 이해

오류 메시지에는 다음 정보가 포함됩니다.

• 객체는 React 하위 항목으로 유효하지 않습니다. 유효하지 않은 하위 항목이 객체임을 나타냅니다.
• dispatchConfig, dispatchMarker, NativeEvent, ...: 첫 번째 인수로 전달되는 이벤트 객체의 속성을 나열합니다. onClick 핸들러.
• 환영의 렌더링 방법을 확인하세요. 오류가 발생한 구성 요소를 가리킵니다(구성 요소 이름이 "Welcome"이라고 가정).

추가 참고 사항

• 화살표 함수 바인딩: 화살표 함수에는 자체 this 바인딩이 없으므로 정의된 범위에 자동으로 바인딩됩니다.
• 상태 업데이트: 콜백 함수와 함께 setState 메소드를 사용하여 화살표 함수 내에서 구성 요소의 상태를 계속 업데이트할 수 있습니다.

<code class="javascript">onClick={(e) => this.setState((prevState) => ({ lang: item }))}</code>

위 내용은 `render` 메소드에서 배열을 매핑할 때 'Invalid React Child' 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!