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

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

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}) => {

나도이 "개체가 React 자식으로 유효하지 않습니다"라는 오류가 발생했으며, 원인은 JSX에서 비동기 함수를 호출했기 때문입니다. 아래를 참조하십시오.

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

내가 배운 것은 비동기 렌더링이 React에서 지원되지 않는다는 것입니다. React 팀은 여기에 설명 된대로 솔루션을 개발 중 입니다.

Android에서 Firebase를 사용하는 사람은 Android 만 깨뜨립니다. 내 iOS 에뮬레이션은 무시합니다.

그리고 위의 Apoorv Bankey에 의해 게시 된대로.

안드로이드의 Firebase V5.0.3 이상은 atm입니다. 고치다:

npm i --save firebase@5.0.3

https://github.com/firebase/firebase-js-sdk/issues/871에서 여러 번 확인되었습니다.

나도 같은 문제가 있지만 내 실수는 너무 바보입니다. 객체에 직접 액세스하려고했습니다.

class App extends Component {
    state = {
        name:'xyz',
        age:10
    }
    render() {
        return (
            <div className="App">
                // this is what I am using which gives the error
                <p>I am inside the {state}.</p> 

                //Correct Way is

                <p>I am inside the {this.state.name}.</p> 
            </div>
        );
    }                                                                             

}

어떤 이유로 든 firebase를 가져온 경우. 그런 다음 실행 해보십시오 npm i --save firebase@5.0.3. 이것은 firebase break react-native이기 때문에 실행하면 문제가 해결됩니다.

내 경우에는 렌더링 함수에서 html 요소를 반환하는 것을 잊어 버렸고 객체를 반환했습니다. 내가 한 것은 html 요소로 {items}를 ​​감싸는 것입니다. 아래와 같은 간단한 div

<ul>{items}</ul>

나는 props중괄호에 넣지 않았기 때문에 같은 문제가있었습니다 .

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

따라서 코드가 위의 코드와 유사하면이 오류가 발생합니다. 이 문제를 해결하려면에 중괄호를 넣으십시오 props.

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

같은 오류가 발생했습니다.

export default withAlert(Alerts)

이에

export default withAlert()(Alerts).

이전 버전에서는 이전 코드가 괜찮 았지만 이후 버전에서는 오류가 발생합니다. 따라서 이후 코드를 사용하여 errror를 피하십시오.

내 경우 에는 배열 자체를 반환하는 대신 요소 배열을 중괄호 로 반환했기 때문에 오류가 발생 했습니다.

오류가있는 코드

   render() {
        var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
        );
        return {rows};
    }

올바른 코드

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
    );
    return rows;
}

전체 객체 대신 객체의 키를 사용했습니다!

자세한 내용은 https://github.com/gildata/RAIO/issues/48 에서 확인할 수 있습니다.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SCT extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: this.props.data,
            new_data: {}
        };
    }
    componentDidMount() {
        let new_data = this.state.data;
        console.log(`new_data`, new_data);
        this.setState(
            {
                new_data: Object.assign({}, new_data)
            }
        )
    }
    render() {
        return (
            <div>
                this.state.data = {JSON.stringify(this.state.data)}
                <hr/>
                <div style={{color: 'red'}}>
                    {this.state.new_data.name}<br />
                    {this.state.new_data.description}<br />
                    {this.state.new_data.dependtables}<br />
                </div>
            </div>
        );
    }
}

SCT.propTypes = {
    test: PropTypes.string,
    data: PropTypes.object.isRequired
};

export {SCT};
export default SCT;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

동일한 문제가 있습니다. 제 경우에는 redux 상태를 업데이트 하고 새 데이터 매개 변수가 이전 매개 변수와 일치하지 않으므로이 매개 변수를 통해 일부 매개 변수에 액세스하려는 경우,

이 경험은 누군가를 도울 수 있습니다.

Firebase를 사용 중이고이 오류가 표시되면 올바르게 가져 오는지 확인하는 것이 좋습니다. 버전 5.0.4부터 다음과 같이 가져와야합니다.

import firebase from '@firebase/app'
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

예, 알아요 이것도 45 분을 잃었습니다.

일반적으로 제대로 구조 조정하지 않기 때문에 팝업이 나타납니다. 이 코드를 예로 들어 보겠습니다.

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

우리는 그것을 = text =>매개 변수 와 함께 선언하고 있습니다. 그러나 실제로 React는 이것이 포괄적 인 props객체 가 될 것으로 기대하고 있습니다 .

그래서 우리는 실제로 다음과 같은 일을해야합니다 :

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

차이점을 알 수 있습니까? 그만큼props 매개 변수 props는 무엇이든 명명 될 수 있습니다 ( 명칭과 일치하는 규칙 일뿐입니다) .React는 키와 val이있는 객체를 기대하고 있습니다.

객체 파괴 를 사용하면 다음과 같이 할 수 있고 자주 볼 수 있습니다.

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

... 작동합니다.

아마도 이것에 걸려 넘어지는 사람은 실수로 구성 요소의 props 매개 변수를 파괴하지 않고 선언했습니다.

나는이 오류의 정말 바보 같은 버전을 보았습니다. 후손을 위해 여기에서 공유 할 수도 있습니다.

나는 이와 같은 JSX를 가지고 있었다 :

...
{
  ...
  <Foo />
  ...
}
...

무언가를 디버깅하기 위해 이것을 주석 처리해야했습니다. IDE에서 키보드 단축키를 사용하여 다음과 같은 결과를 얻었습니다.

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

물론 이것은 무효입니다. 객체는 반응 자식으로 유효하지 않습니다!

이 목록에 다른 솔루션을 추가하고 싶습니다.

명세서:

• "반응": "^ 16.2.0",
• "react-dom": "^ 16.2.0",
• "react-redux": "^ 5.0.6",
• "react-scripts": "^ 1.0.17",
• "redux": "^ 3.7.2"

같은 오류가 발생했습니다.

잡히지 않는 오류 : 개체가 반응 자식으로 유효하지 않습니다 (발견 : 키가 {XXXXX} 인 개체). 자식 컬렉션을 렌더링하려면 대신 배열을 사용하십시오.

이것은 내 코드였습니다.

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

해결책:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

페이로드가 항목을 오브젝트로 전송하여 문제점이 발생했습니다. 페이로드 변수를 제거하고 userInput 값을 디스패치에 넣으면 모든 것이 예상대로 작동하기 시작했습니다.

Firebase를 사용하는 경우 프로젝트 내 파일이 있으면 그런 다음 가져 오기 firebase 문을 끝에 배치하십시오!

나는 이것이 미친 것처럼 들리지만 그것을 시험해라!!

다음 오류가 발생했을 때 문제가 간단했습니다.

objects are not valid as a react child (found object with keys {...}

{object}를 사용하여 문자열로 예상되는 구성 요소에서 객체를 직접 렌더링하려고 시도하는 동안 오류에 키가 지정된 객체를 전달하고 있다는 것입니다.

object: {
    key1: "key1",
    key2: "key2"
}

React Component에서 렌더링하는 동안 다음과 같은 것을 사용했습니다.

render() {
    return this.props.object;
}

그러나 그것은

render() {
    return this.props.object.key1;
}

상태 비 저장 구성 요소를 사용하는 경우 다음과 같은 형식을 따릅니다.

const Header = ({pageTitle}) => (
  <h1>{pageTitle}</h1>
);
export {Header};

이것은 나를 위해 일하는 것 같았다

이와 같은 일이 나에게 일어난 것입니다 ...

나는 썼다 :

{response.isDisplayOptions &&
{element}
}

div 안에 배치하면 문제가 해결되었습니다.

{response.isDisplayOptions &&
    <div>
        {element}
    </div>
}

발견 : 키가있는 객체

이는 무언가를 전달하는 것이 핵심 가치라는 것을 의미합니다. 따라서 핸들러를 수정해야합니다.

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

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

중괄호 ( {})를 놓쳤습니다 .

필자의 경우 자식 함수 구성 요소에 비동기를 추가 하고이 오류가 발생했습니다. 자식 구성 요소와 비동기를 사용하지 마십시오.

Firebase를 사용하는 경우 import명령문 끝에 넣어도 작동하지 않으면 수명주기 방법 중 하나에 넣을 수 있습니다 componentWillMount(). 즉, 넣을 수 있습니다 .

componentWillMount() {
    const firebase = require('firebase');
    firebase.initializeApp({
        //Credentials
    });
}

Invariant Violation: Objects are not valid as a React childrenderItem소품 이 필요한 구성 요소를 사용할 때 다음과 같은 일이 발생했습니다 .

renderItem={this.renderItem}

그리고 나의 실수는 나의 renderItem방법 을 만드는 것이었다 async.

내 오류는 다음과 같이 작성했기 때문에 발생했습니다.

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})

대신에:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

그것은 그 안에 값 대신 객체를 렌더링하려고한다는 것을 의미했습니다.

편집 : 이것은 기본이 아닌 반응입니다.