Ik ben een React-app aan het opzetten met een Rails-backend. Ik krijg de foutmelding “Objecten zijn niet geldig als een React-kind (gevonden: object met sleutels {id, name, info, created_at, updated_at}). Als je een verzameling kinderen wilde weergeven, gebruik dan in plaats daarvan een array.”

Zo zien mijn gegevens eruit:

[
    {
        "id": 1,
        "name": "Home Page",
        "info": "This little bit of info is being loaded from a Rails 
        API.",
        "created_at": "2018-09-18T16:39:22.184Z",
        "updated_at": "2018-09-18T16:39:22.184Z"
    }
]

Mijn code is als volgt:

import React from 'react';
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      homes: []
    };
  }
  componentDidMount() {
    fetch('http://localhost:3000/api/homes')
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            homes: result
          });
        },
        // error handler
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }
  render() {
    const { error, isLoaded, homes } = this.state;
    if (error) {
      return (
        <div className="col">
          Error: {error.message}
        </div>
      );
    } else if (!isLoaded) {
      return (
        <div className="col">
          Loading...
        </div>
      );
    } else {
      return (
        <div className="col">
          <h1>Mi Casa</h1>
          <p>This is my house y'all!</p>
          <p>Stuff: {homes}</p>
        </div>
      );
    }
  }
}
export default Home;

Wat doe ik verkeerd?

Antwoord 1, autoriteit 100%

Uw gegevens homesis een array, dus u zou de array moeten herhalen met Array.prototype.map()zodat het werkt.

return (
    <div className="col">
      <h1>Mi Casa</h1>
      <p>This is my house y&apos;all!</p>
      {homes.map(home => <div>{home.name}</div>)}
    </div>
  );

Antwoord 2, autoriteit 16%

Ik had een soortgelijke fout terwijl ik een aangepaste modaal aan het maken was.

const CustomModal = (visible, modalText, modalHeader) => {}

Het probleem was dat ik mijn waarden niet op deze manier tussen accolades zette.

const CustomModal = ({visible, modalText, modalHeader}) => {}

Als u meerdere waarden aan de component moet doorgeven, moet u er accolades omheen gebruiken.

Antwoord 3, autoriteit 12%

Ik kreeg vandaag dezelfde fout, maar met een ander scenario in vergelijking met het scenario dat in deze vraag is gepost. Ik hoop dat de oplossing voor het onderstaande scenario iemand helpt.

De functie renderhieronder is voldoende om mijn scenario en oplossing te begrijpen:

render() {
    let orderDetails = null;
    if(this.props.loading){
        orderDetails = <Spinner />;
    }
    if(this.props.orders.length == 0){
        orderDetails = null;
    }
    orderDetails = (
        <div>
            {
                this.props.orders && 
                this.props.orders.length > 0 && 
                this.props.orders.map(order => (
                <Order 
                    key={order.id}
                    ingredient={order.ingredients}
                    price={order.price} />
                ))
            }
        </div>
    );
    return orderDetails;
}

In bovenstaand codefragment: als return orderDetailswordt verzonden als return {orderDetails}, verschijnt de fout in deze vraag ondanks de waarde van ‘orderDetails’ (waarde als <Spinner/>of nullof JSX gerelateerd aan <Order />component).

Foutbeschrijving: react-dom.development.js:57 Uncaught Invariant Violation: Objecten zijn niet geldig als React-kind (gevonden: object met sleutels {orderDetails}). Als je een verzameling kinderen wilt renderen, gebruik dan een array.

We kunnen geen JavaScript-object retourneren van een retouraanroep binnen de methode render(). De reden hiervoor is dat React verwacht dat wat JSX, false, null, undefined, true wordt weergegeven in de gebruikersinterface en NIET een JavaScript-object dat ik probeer weer te geven wanneer ik return {orderDetails}gebruik en daarom de foutmelding krijg zoals hierboven.

GELDIG :

<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

ONGELDIG :

<div>{orderDetails}</div> // This is WRONG, orderDetails is an object and NOT a valid return value that React expects.

Bewerken:ik kreeg deze fout ook op de testserver van mijn bedrijf die door QA’s wordt gebruikt voor hun tests. Ik wees mijn lokale code naar die testserver en testte het scenario waarin deze fout werd gemeld door het QA-team en vond GEEN FOUT op mijn lokale computer. Ik werd verrast. Ik heb het meerdere keren opnieuw gecontroleerd, het scenario opnieuw gecontroleerd met het QA-team en ik deed het goed, maar ik kon het probleem nog steeds niet repliceren. Ik heb mijn collega-ontwikkelaars geraadpleegd, maar kon de oorzaak nog steeds niet achterhalen. Dus in overeenstemming met de informatie in het foutbericht begon ik alle code te scannen die ik had ingezet in mijn laatste implementatie-commit (om specifieker te zijn laatste 4-5 commits omdat ik vermoedde dat het daar zou kunnen zijn van de laatste paar implementaties, maar werd gevangen in de huidige implementatie), vooral alle componenten die ik had ontwikkeld en ontdekte dat er een component was – waarbinnen aan geen specifieke voorwaarde werd voldaan, dus het gaf er NIETS van terug. Dus zie hieronder voorbeeld pseudo-code. Ik hoop dat het helpt.

render () {
return (
    {this.props.condition1 && (
       return some jsx 1
    )}
    {this.props.condition1 && (
       return some jsx 2
    )})
}

Als je in bovenstaande pseudo-code ziet dat niet aan voorwaarde1 en voorwaarde2 wordt voldaan, dan zal deze component er NIETS van teruggeven en idealiter moet een reactiecomponent wat JSX, false, null, undefined, true ervan teruggeven.

Antwoord 4, autoriteit 6%

Ik hoop dat het iemand anders zal helpen.

Deze fout lijkt ook op te treden wanneer u onbedoeld een complex object verzendt dat bijvoorbeeld onderliggende componenten Date to React bevat.

Voorbeeld hiervan is het doorgeven aan de onderliggende component new Date(‘….’) als volgt:

const data = {name: 'ABC', startDate: new Date('2011-11-11')}
 ...
 <GenInfo params={data}/>

Als u het verzendt als waarde van een onderliggende componentparameter, zou u een complex object verzenden en kunt u dezelfde fout krijgen als hierboven vermeld.

Controleer of u iets soortgelijks passeert (dat een complex object onder de motorkap genereert). In plaats daarvan kunt u die datum als tekenreekswaarde verzenden en nieuwe Datum (tekenreeksdatum) in de onderliggende component doen.

Antwoord 5, autoriteit 4%

Hoewel niet specifiek voor het antwoord, treedt deze fout meestal op wanneer u per ongeluk een JavaScript-expressie gebruikt in een JavaScript-context met behulp van {}

Bijvoorbeeld

let x=5;
export default function App(){ return( {x} ); };

De juiste manier om dit te doen is

let x=5;
export default function App(){ return( x ); };

Antwoord 6, autoriteit 2%

Had hetzelfde probleem, in mijn geval had ik
1. Parseer de string in Json
2. Zorg ervoor dat wanneer ik mijn weergave render niet het hele object probeert weer te geven, maar object.value

data = [
{
    "id": 1,
    "name": "Home Page",
    "info": "This little bit of info is being loaded from a Rails 
    API.",
    "created_at": "2018-09-18T16:39:22.184Z",
    "updated_at": "2018-09-18T16:39:22.184Z"
}];
var jsonData = JSON.parse(data)

Dan mijn mening

return (
<View style={styles.container}>
  <FlatList
    data={jsonData}
    renderItem={({ item }) => <Item title={item.name} />}
    keyExtractor={item => item.id}
  />
</View>);

Omdat ik een array gebruik, heb ik een platte lijst gebruikt om weer te geven en ervoor gezorgd dat ik met object.value werk, niet met object, anders krijg je hetzelfde probleem

Antwoord 7, autoriteit 2%

Objecten zijn niet geldig als React-kind

Ik kreeg ook dezelfde fout, maar met een ander scenario. Ik was aan het leren reageren, gebruikReducer hook en implementeerde een teller met knoppen voor verhogen, verlagen en resetten en ik probeerde de telling op het scherm weer te geven, maar ik was de bovengenoemde fout.

In de code had ik de telling gedeclareerd die wordt geretourneerd door useReducer hook als het object en ik probeerde deze rechtstreeks terug te geven in plaats van de eigenschap count ervan

Ik zou eigenlijk count.count moeten retourneren en ik gaf alleen count (object zelf) en geen eigenschap terug.

We kunnen het object stringificeren en de string ook teruggeven.

import React, { useReducer } from "react";
const initialState = {
count:0,
}
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return {count:state.count + 1}
        case 'decrement':
            return {count:state.count - 1}
        case 'reset':
            return initialState
        default:
            return state
    }
}
function CounterWithReducer(props) {
  const [count, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={()=>{dispatch({type:'increment'})}}>Increment</button>
      <button onClick={()=>{dispatch({type:"decrement"})}}>Decrement</button>
      <button onClick={()=>{dispatch({type:"reset"})}}>Reset</button>
    </>
  );
}
export default CounterWithReducer;

In de bovenstaande code

{count}

In dit gedeelte (in het retourgedeelte) heb ik de fout gemaakt in plaats van count. Ik moet count.count

gebruiken

Samenvatting is dat als je een object op het scherm probeert te tonen, je niet kunt gebruikenJSON.stringify()of enige eigenschap van het object.

Ik ben in de vroege fase van mijn leven als ontwikkelaar. Excuseer me voor eventuele spelfouten.

Antwoord 8

Ik heb de fout ook gemaakt, en ik heb het verprutst door de accolades te verwijderen, ik hoop dat het iemand anders zal helpen.

Je kunt zien dat ik de oplichter niet in de accolade heb gezet, en de fout is opgetreden, toen ik de potige accolade verwijderde, verdween de fout.

const modal = (props) => {
const { show, onClose } = props;
let con = <div className="modal" onClick={onClose}>
        {props.children}
        </div>;
return show === true ? (
    {con}
) : (
    <div>hello</div>
);

Er is een artikel over het gebruik van de accolade.klik hier

Antwoord 9

In Mijn geval had ik een toegevoegde async op app.js zoals hieronder getoond.

const App = async() => {
return(
<Text>Hello world</Text>
)
}

Maar het was niet nodig, bij het testen van iets had ik het toegevoegd en het was niet langer nodig. Na het verwijderen, zoals hieronder weergegeven, begon het te werken.

const App =() => {
    return(
    <Text>Hello world</Text>
    )
}

Antwoord 10

In JavaScript zijn arrays en verzamelingen verschillend, hoewel ze enigszins op elkaar lijken, maar hier heeft de react een array nodig.
U moet een arraymaken uit de collectionen deze toepassen.

let homeArray = new Array(homes.length);
let i = 0
for (var key in homes) {
    homeArray[i] =  homes[key];
    i = i + 1;
}

Antwoord 11

Om aan de andere opties toe te voegen, probeerde ik toegang te krijgen tot een genest object binnen het hoofdobject via de puntmethode zoals in:
this.state.arrayData.CompleteAdress.Location
In dit geval is Locatieeen genest object binnen Volledig adresen daarom kan ik het niet eenvoudig openen met de puntnotatie.

• Dus als je met hetzelfde probleem wordt geconfronteerd, probeer dan JSON.parse zodat je toegang krijgt tot het geneste object en manipuleer dienovereenkomstig.

Antwoord 12

Ik had hetzelfde probleem, maar nu ben ik blij dit probleem op te lossen.

1. npm i core-js
2. zet deze regel in de eerste regel van uw index.js-bestand.
   import core-js

Antwoord 13

In jouw staat wordt home geïnitialiseerd als een array
homes: []

In je return is er een poging gedaan om home te renderen (wat een array is).
<p>Stuff: {homes}</p>

Kan niet op deze manier worden gedaan — Als je het wilt renderen, moet je een array renderen in elk afzonderlijk item. Bijvoorbeeld: gebruik map()

Bijvoorbeeld: {home.map(item=>item)}

Antwoord 14

Dezelfde fout maar met een ander scenario.
Ik had mijn staat als

       this.state = {
        date: new Date()
    }

dus toen ik het vroeg in mijn klascomponent had ik

p>Date = {this.state.date}</p>

In plaats van

p>Date = {this.state.date.toLocaleDateString()}</p>

Antwoord 15

Ik had dit probleem toen ik probeerde een object weer te geven op een onderliggende component die rekwisieten ontving.

Ik heb dit opgelost toen ik me realiseerde dat mijn code een object probeerde weer te geven en niet de waarde van de objectsleutel die ik probeerde weer te geven.

Antwoord 16

gebruik momentnotatie want dat is datum… converteren naar datumnotatie…
Moment(array_list_item.close_date).format(“MM-DD-YYYY”)}

Opmerking: React zal dit type datumnotatie niet weergeven in de kaartfunctie

“created_at”: “2018-09-18T16:39:22.184Z”,

Antwoord 17

Ik kreeg te maken met deze exacte fout. Bij het opsporen van de hoofdoorzaak van dit probleem, ontdekte ik dat de FRONTEND-code (React) een aanroep doet naar API en het antwoord op de pagina toont door toegang te krijgen tot een eigenschap van dat antwoord!
Dus in dit geval zijn er twee gevallen

• Ofwel bestaat die eigenschap niet in het antwoord van de backend (het zal een andere fout opleveren)
  OF
• De eigenschap van de backend-respons is een complex object (Object inside Object) waartoe onze frontend React-component toegang probeert te krijgen,
  maar kan niet lezen omdat React ofwel een STRING nodig heeft (door rechtstreeks toegang te krijgen tot de specifieke eigenschap, bijvoorbeeld Object.property) Of een array. [Deze zaak]

Dus we hebben deze fout ontvangen omdat de React de STRING verwachtte maar het object kreeg (omdat je Object in object hebt doorgegeven).

Controleer uw backend-logica (API) die het antwoord verzendt.

Antwoord 18

Ik had een soortgelijk probleem, maar bij mij werkte dit.
Mijn uitvoer

Maar de fout die ik had gemaakt was simpel. In mijn inhoud waren meer dan twee en ik was vergeten om als een array in te pakken. Ik had geen beugel gezet.

import React from 'react'
import {Button} from './Button';
import {Link} from 'react-router-dom'
import './HeroSection.css';
function HeroSection({
    lightBg, topLine, lightText, lightTextDesc, headline, description, 
    buttonLabel, img,alt,imgStart}
) {
    return (
        <>
            <div className={lightBg? 'home__hero-section': 'home__hero-section darkBg'}>
                <div className='container'>
                    <div className="row home__hero-row" 
                    style={{display:'flex', flexDirection:imgStart==='start'?' row-reverse':'row'}}
                    >
                    <div className='col'>
                        <div className='home__hero-text-wrapper'>
                            <div className='topline'>{topLine}</div>
                            <h1 className={lightText? 'heading': 'heading dark'}>{headline}</h1>
 <p className={lightTextDesc? 'home__hero-subtitle': 'home__hero-subtitle dark'}> 
 {description}
 <Link to='/sign-up'>
     <Button buttonSize='btn--wide' buttonColor='blue'>
{buttonLabel}
     </Button>
 </Link>
 </p>
                        </div>
                    </div>
                    <div className='col'>
                        <div className='home__hero-img-wrapper'>
                      <img src={img} alt={alt} className='home_hero-img'/>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </>
    );
}
export default HeroSection

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

Antwoord 19

In mijn geval bevatten de gegevens die ik wilde weergeven een object binnen dat van de array, dus hierdoor gaf het een fout, dus voor andere mensen die er zijn, controleer je gegevens ook een keer en of het een object bevat , je moet het naar een array converteren om alle waarden af te drukken of als je een specifieke waarde nodig hebt, gebruik dan.

Mijn gegevens :

body: " d fvsdv"
photo: "http://res.cloudinary.com/imvr7/image/upload/v1591563988/hhanfhiyalwnv231oweg.png"
postedby: {_id: "5edbf948cdfafc4e38e74081", name: "vit"}       
//this is the object I am talking about.
title: "c sx "
__v: 0
_id: "5edd56d7e64a9e58acfd499f"
__proto__: Object

Om slechts één waarde af te drukken

<h5>{item.postedby.name}</h5>

Antwoord 20

Ik had deze fout bij het gebruik van de BigNumber-bibliotheek op een waarde voordat ik UseState instelde:

const { toBN } = web3.utils;
...
 setOwner0Balance(toBN(await getBalance(owner0)));

Antwoord 21

Dezelfde fout maar een ander scenario. Ik was van plan mijn aangepaste functionele component toe te wijzen aan layoutComponent prop van een module van een derde partij.

Foutieve code:

customLayout = () => {
// function returning a component
}
//usage:
{customLayout}

Oplossing:

CustomLayout = () => {
// functional component
}
//usage:
<CustomLayout></CustomLayout>