[javascript] 불변 위반 : 객체는 반응 자식으로 유효하지 않습니다

JAVASCRIPT / 글쓴이

내 구성 요소의 렌더링 기능에는 다음이 있습니다.

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>
    );
  }

<li>요소를 클릭하면 다음과 같은 오류가 발생합니다.

잡히지 않는 오류 : 불변 위반 : 객체가 React 자식으로 유효하지 않음 (발견 : {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX) , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, 버튼, 버튼, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). 자식 컬렉션을 렌더링하려면 대신 배열을 사용하거나 React 애드온에서 createFragment (object)를 사용하여 개체를 래핑하십시오. 의 렌더링 방법을 확인하십시오 Welcome.

내가로 변경하는 경우 this.onItemClick.bind(this, item)에 (e) => onItemClick(e, item)지도 기능 모든 작품 안에 예상대로.

누군가 내가 잘못하고있는 것을 설명하고 왜이 오류가 발생하는지 설명 할 수 있다면 좋을 것입니다

업데이트 1 :
onItemClick 함수는 다음과 같으며 this.setState를 제거하면 오류가 사라집니다.

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

그러나이 구성 요소의 상태를 업데이트해야 하므로이 줄을 제거 할 수 없습니다

답변

이 오류가 발생하여 의도하지 않게 JSX 코드에 Object를 포함하여 문자열 값이 될 것으로 예상되었습니다.

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElement예전에는 문자열 이었지만 리 팩터로 인해 Object가되었습니다. 불행히도 React의 오류 메시지는 문제가 발생한 줄을 알려주는 데 도움이되지 않았습니다. 구성 요소에 “props”가 전달되는 것을 인식하고 문제가되는 코드를 찾을 때까지 스택 추적을 따라야했습니다.

문자열 값인 객체의 속성을 참조하거나 원하는 문자열 표현으로 객체를 변환해야합니다. JSON.stringify실제로 객체의 내용을 보려는 경우 한 가지 옵션이있을 수 있습니다 .

답변

따라서 createdAtDate 객체 인 속성 을 표시하려고 할 때이 오류가 발생했습니다 . 이렇게 .toString()마지막에 연결 하면 변환이 수행되고 오류가 제거됩니다. 다른 사람이 같은 문제를 겪을 경우를 대비하여 가능한 답변으로 게시하십시오.

{this.props.task.createdAt.toString()}

답변

방금 같은 오류가 발생했지만 다른 실수로 인해 다음과 같이 이중 괄호를 사용했습니다.

{{count}}

count올바른 값 대신에 값을 삽입하려면 다음을 수행하십시오.

{count}

컴파일러는 아마도으로 전환했습니다 {{count: count}}. 즉, Object를 React 자식으로 삽입하려고합니다.

답변

오늘 같은 문제가 있었기 때문에 이것에 추가 할 것이라고 생각했습니다. <div>태그로 묶었을 때 함수 만 반환했기 때문이라고 밝혀졌습니다. 아래와 같이 작동했습니다.

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

위의 오류가 발생했습니다. return()섹션을 다음과 같이 변경하여 문제를 해결했습니다 .

return (
  <div>
    {gallerySection}
  </div>
);

… 또는 간단히 :

return gallerySection

답변

반응 자식 (단수) 은 객체가 아닌 기본 데이터 유형의 유형 이거나 JSX 태그 일 수 있습니다 (이 경우에는 아닙니다) . 개발시 Proptypes 패키지를 사용하여 유효성 검사를 수행하십시오.

아이디어로 당신을 표현하는 간단한 코드 스 니펫 (JSX) 비교 :

  1. 오류 : 객체가 자식으로 전달되었습니다.

    <div>
{/* item is object with user's name and its other details on it */}
 {items.map((item, index) => {
  return <div key={index}>
--item object invalid as react child--->>>{item}</div>;
 })}
</div>

  2. 오류없이 : 객체의 속성 ( 기본적이어야 함, 즉 문자열 값 또는 정수 값 )이 자식으로 전달됩니다.

    <div>
 {/* item is object with user's name and its other details on it */}
  {items.map((item, index) => {
   return <div key={index}>
--note the name property is primitive--->{item.name}</div>;
  })}
</div>

TLDR; (아래 소스에서) : JSX에서 렌더링하는 모든 항목이 React를 사용할 때 객체가 아닌 기본 요소인지 확인하십시오. 이 오류는 일반적으로 이벤트 디스패치와 관련된 함수에 예기치 않은 오브젝트 유형 (예 : 문자열을 전달해야 할 때 오브젝트 전달)이 제공되었거나 구성 요소의 JSX 일부가 기본 요소 (예 : this.props)를 참조하지 않기 때문에 발생합니다. vs this.props.name).

출처-codingbismuth.com

답변

Mine은 render () 함수의 return 문 안에 HTML 요소를 포함하는 변수 주위에 중괄호를 불필요하게 배치하는 것과 관련이있었습니다. 이것은 React가 그것을 요소가 아닌 객체로 취급하게했습니다.

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

요소에서 중괄호를 제거하면 오류가 사라지고 요소가 올바르게 렌더링됩니다.

답변

광산은 프리젠 테이션 구성 요소로 전송되는 소품 주위의 중괄호를 잊어 버렸습니다.

전에:

const TypeAheadInput = (name, options, onChange, value, error) => {

후

const TypeAheadInput = ({name, options, onChange, value, error}) => {