javascript - Objekt är inte giltiga som ett React-barn. Om du menade att rendera en samling barn, använd en array istället

Jag sätter upp en React-app med en Rails-backend. Jag får felet "Objekt är inte giltiga som ett React-barn (hittade: objekt med nycklar {id, name, info, created_at, updated_at}). Om du menade att rendera en samling barn, använd en array istället."

Så här ser mina data ut:

[
    {
        "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"
    }
]

Min kod är som följer:

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;

Vad gör jag för fel?

Svar #1

Din data homes är en array, så du skulle behöva iterera över arrayen med Array.prototype.map() för att det ska fungera.

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

Svar #2

Jag hade ett liknande fel medan jag skapade en anpassad modal.

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

Problemet var att jag glömde att funktionella komponenter bara kan ha en prop som skickas till dem, enligt REACT-dokumentationen:

Denna funktion är en giltig React-komponent eftersom den accepterar ett enda "props" (som står för egenskaper) objektargument med data och returnerar ett React-element. Vi kallar sådana komponenter för "funktionskomponenter" eftersom de bokstavligen är JavaScript-funktioner. React-dokumentation

Därför, när vi vill skicka flera variabler, behöver vi kapsla in dem i ett objekt eller en array och skicka pekaren till den arrayen eller objektet. Och destrukturera det på komponentsidan innan vi anropar komponenten. Alternativt kan vi använda måsvingar för att indikera att vi skickar ett objekt med identiska egenskapsnamn och variabler som innehåller värdet av dessa egenskaper, som i exemplet här. Och sedan definiera funktionen också för att destrukturera vid mottagning av egenskaperna som finns i objektet.

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

Om du har flera värden att skicka till komponenten bör du skicka ett objekt, alltså måsvingar runt dess egenskaper/variabler (förutsatt att de har samma namn).

Svar #3

Jag fick samma fel idag men med ett annat scenario jämfört med scenariot som publicerades i den här frågan. Hoppas att lösningen på scenariot nedan hjälper någon.

Funktionen render nedan är tillräcklig för att förstå mitt scenario och min lösning:

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

I ovanstående kodavsnitt: Om return orderDetails skickas som return {orderDetails} dyker felet som nämns i denna fråga upp trots värdet på 'orderDetails' (värde som <Spinner/> eller null eller JSX relaterad till <Order />-komponenten).

Felbeskrivning : react-dom.development.js:57 Uncaught Invariant Violation: Objekt är inte giltiga som ett React-barn (hittade: objekt med nycklar {orderDetails}). Om du menade att rendera en samling av barn, använd istället en array.

Vi kan inte returnera ett JavaScript-objekt från ett return-anrop inuti render()-metoden. Anledningen är att React förväntar sig någon form av JSX, false, null, undefined, true för att rendera i användargränssnittet och INTE något JavaScript-objekt som jag försöker rendera när jag använder return {orderDetails} och därför får felet som ovan.

GILTIG :

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

OGILTIG :

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

Redigera: Jag fick också detta fel på mitt företags testserver som används av QA-teamet för deras tester. Jag pekade min lokala kod till den testservern och testade scenariot där detta fel rapporterades av QA-teamet och fann INGET FEL på min lokala maskin. Jag blev överraskad. Jag dubbelkontrollerade flera gånger, gick igenom scenariot med QA-teamet och jag gjorde rätt, men jag kunde fortfarande inte återskapa problemet. Jag konsulterade mina kollegor utvecklare men vi kunde fortfarande inte lista ut grundorsaken. Så för att följa informationen i felmeddelandet började jag skanna all kod som jag hade distribuerat i mitt senaste deploy-commit (för att vara mer specifik de senaste 4-5 commiten eftersom jag misstänkte att det kunde ha funnits där från de senaste deploymenten men fångades i den nuvarande deploymenten), särskilt alla komponenter jag hade utvecklat, och upptäckte att det fanns en komponent - inuti vilken ingen specificerad villkor uppfylldes så den returnerade INGENTING från den. Se nedan exempel på pseudokod. Jag hoppas att det hjälper.

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

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

Om du ser i ovanstående pseudokod, om condition1 och condition2 inte uppfylls, kommer denna komponent inte att rendera NÅGONTING och i idealfallet måste en React-komponent returnera någon JSX, false, null, undefined eller true.

Svar #4

Jag hoppas att det kommer att hjälpa någon annan.

Detta fel verkar också uppstå när du Oavsiktligt skickar ett komplext objekt som inkluderar till exempel Date till React-barnkomponenter.

Ett exempel på det är att skicka till ett barnkomponent new Date('....') på följande sätt:

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

Om du skickar det som värde för en parameter i en barnkomponent skulle du skicka ett komplext objekt och du kan få samma fel som anges ovan.

Kontrollera om du skickar något liknande (som genererar ett komplext objekt i bakgrunden). Istället kan du skicka det datumet som ett strängvärde och göra new Date(string_date) i barnkomponenten.

Relaterade artiklar