Vous avez peut-être renvoyé undefined, un tableau ou un autre objet invalide affichant des données d'état

Question

Vous avez rencontré des problèmes lors de l'itération d'une liste et de l'impression d'éléments dans React.

Le code est React:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class NewComponent extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = {myData: []} 
    } 

    componentWillMount(){ 
     let data = document.getElementById('demo').innerHTML; 
     data = JSON.parse(data); 
     this.setState({myData: data}); 
    } 

    render() { 
     return this.state.myData.map((item) => { 
     return (
      <div> 
       <h3>{item.title}</h3> 
       <p>{item.description}</p> 
      </div> 
      ); 
     }); 
     } 
    } 


ReactDOM.render(
    <NewComponent />, 
    document.getElementById('demo') 
) 

Et je reçois une erreur de:

bundle.js:830 Uncaught Error: NewComponent.render(): A valid React element 
(or null) must be returned. You may have returned undefined, an array or 
some other invalid object. 

Je suis sûr qu'il ya une question avec des rendements dans la fonction de rendu de la Je ne sais pas quel est le problème.

Permet de modifier

J'ai fait les modifications suivantes, l'erreur est plus là, mais rien est rendu.

renderList() { 
console.log("Running"); 
return this.state.myData.map((item) => { 
    <div> 
     <h3>{item.title}</h3> 
     <p>{item.description}</p> 
    </div> 
    }); 
} 

render() { 
    console.log(this.state.myData); 
    if(this.state.myData.length) 
     return <div>{this.renderList()}</div> 
    else 
     return <div>Loading...</div> 
} 

Dans la console Chrome je reçois:

(2) [{…}, {…}] 
0:{_id: {…}, description: "hello", title: "sankit"} 
1:{_id: {…}, description: "lets add some thing new", title: "hi"} 
length:2 
_proto_:Array(0) 

Running 

Answer 1

ce que vous pouvez faire est d'extraire votre code js de la méthode render dans une méthode distincte comme ceci:

renderList() { 
    return this.state.myData.map((item) => { 
     <div> 
     <h3>{item.title}</h3> 
     <p>{item.description}</p> 
     </div> 
    }) 
} 

alors dans votre render:

render() { 
    if(this.state.myData.length){ 
    return (
     <div>{this.renderList()}</div> 
    ); 
    } 
    else 
    { 
    return (
     <div>Loading...</div> 
    ); 
    } 
} 

Answer 2

Vous pouvez envelopper avec l'élément racine comme div, React ver 15 rendre les fonctions ne supporte que le retour d'un élément.

render() { 
    <div>{this.state.myData.map((item) => 
     <div> 
      <h3>{item.title}</h3> 
      <p>{item.description}</p> 
     </div> 
     )}</div> 
    } 
} 

Answer 3

changement comme celui-ci , Alors que vous utilisez map devez utiliser l'attribut key pour l'index

makeUI() { 
     if(!this.state.myData.length) 
      return 

     return this.state.myData.map((item, index) => { 
     return (
      <div key={index}> 
       <h3>{item.title}</h3> 
       <p>{item.description}</p> 
      </div> 
      ) 
     }) 
    } 

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