Inwariant Naruszenie: Obiekty nie są ważne jako React dziecko

Question

W uczynić funkcji mojego komponentu mam:

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

wszystko czyni dobrze, jednak po kliknięciu elementu <li> I pojawia się następujący błąd:

Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Welcome .

Jeśli zmienię na this.onItemClick.bind(this, item) na (e) => onItemClick(e, item) w funkcji mapy wszystko działa zgodnie z oczekiwaniami.

Jeśli ktoś mógłby wyjaśnić, co robię źle i wyjaśnić dlaczego ten błąd, byłoby świetnie

UPDATE 1:
funkcja onItemClick jest następujący i usuwanie this.setState wyniki w błędzie znika.

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

Ale nie mogę usunąć tę linię jako muszę zaktualizować stan tego składnika

Answer 1

miałem ten błąd i okazało się, że został nieumyślnie tym obiekt w moim kodu JSX że spodziewał się wartość ciągu:

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

breadcrumbElement kiedyś ciągiem, ale ze względu na Refactor stał się obiektem. Niestety komunikat o błędzie React'a nie sprawdził się dobrze, kierując mnie do linii, na której istniał problem. Musiałem śledzić mój ślad stosu aż do momentu, w którym rozpoznałem "rekwizyty" przekazywane do komponentu, a następnie znalazłem obraźliwy kod.

Answer 2

Wystąpił ten błąd podczas próby wyświetlenia właściwości createdAt, która jest obiektem Date. Jeśli połączysz się z takim końcem, to wykona konwersję i wyeliminuje błąd. Wystarczy delegowania to jako możliwą odpowiedź na wypadek gdyby ktoś inny wpadł na ten sam problem:

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

Answer 3

Właśnie ten sam błąd, ale ze względu na inną pomyłkę: Kiedyś podwójne szelki jak:

{{count}} 

wstawić wartość count zamiast prawidłowego:

{count} 

który kompilator przypuszczalnie zamienił {{count: count}}, czyli próbuje wstawić obiekt jako Re zachowywać się dziecko.

Answer 4

Pomyślałem Dodałbym do tego, jak miałem dzisiaj ten sam problem, okazuje się, że to dlatego, że wracał właśnie funkcję, kiedy owinął je w <div> tagu zaczęło działać, jak poniżej

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

}

powyższy spowodował błąd, zmieniając punkt zwrotny() do:

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

Rozwiązany problem

Answer 5

Użyłeś tylko kluczy obiektu, zamiast całego obiektu!

Więcej szczegółów można znaleźć tutaj: 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>

Answer 6

Mine miał do czynienia z zapominając nawiasów klamrowych wokół podpór wysyłane do prezentacyjnego części:

Przed:

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

Po

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

Answer 7

po prostu położyć się przez naprawdę głupie wersji tego błędu, który może równie dobrze mogę dzielić tutaj dla potomności.

miałem pewne JSX takiego:

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

musiałem skomentować to uwagę debugowania coś. Użyłem skrótu klawiaturowego w moim IDE, co zaowocowało tym:

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

Który jest, oczywiście, nieważne - obiekty nie są ważne, jak reagują dzieci!

Answer 8

Mine miało do czynienia z niepotrzebnym umieszczaniem nawiasów klamrowych wokół zmiennej przechowującej element HTML wewnątrz instrukcji return funkcji render(). To sprawiło, że React traktował to jako obiekt, a nie element.

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

    return (
    {element} 
) 
} 

Po usunięciu nawiasów klamrowych z elementu błąd zniknął, a element został wykonany poprawnie.

Answer 9

Chciałbym dodać inne rozwiązanie do tej listy.

Specyfikacja:

• "reagują": "^ 16.2.0"
• "reagują-DOM": "^ 16.2.0"
• "reagują-Redux" „^ 5.0.6 ",
• " skrypty-reakcje ":"^1.0.17 ",
• " redux ":"^3.7.2"

natknąłem się ten sam błąd:

Uncaught Error: Objects are not valid as a React child (found: object with keys {XXXXX}). If you meant to render a collection of children, use an array instead.

To był mój kod:

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

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

Rozwiązanie:

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

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

Problem został występujących ponieważ ładunek był wysłanie przedmiotu jako obiektu Po usunięciu zmiennej ładunku i umieścić wartość userInput w wysyłce wszystko zaczęło działać zgodnie z oczekiwaniami.