Iteration über eine Sammlung von Daten in ReactJs

Question

Ich habe versucht, eine Sammlung von Daten in React zu iterieren. Es gibt mir keinen Fehler in der Konsole, aber es sagt

[HMR] Warten auf Update-Signal von WDS ... [WDS] Hot Module Replacement aktiviert.

Index.js

import React, {Component} from 'react'; 
import {render} from 'react-dom'; 

var items = [ 
    { name: 'Matthew', link: 'https://bible.com/1/mat.1' }, 
    { name: 'Mark', link: 'https://bible.com/1/mrk.1' }, 
    { name: 'Luke', link: 'https://bible.com/1/luk.1' }, 
    { name: 'John', link: 'https://bible.com/1/jhn.1' } 
]; 

class Home extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      items: [] 
     }; 
    }; 

    render(){ 

     var listItems = this.state.items.map(function(item) { 
      return (
       <li key={item.name}> 
        <a className='button' href={item.link}>{item.name}</a> 
       </li> 
      ); 
     }); 

     return (
      <ul> 
       {listItems} 
      </ul> 
     ); 
    } 
} 

render(<Home />,document.getElementById('contain')); 

Ich verstehe nicht, wie es zu lösen. Jede Art von Hilfe wäre willkommen.

Answer 1

Sie erhalten keine Ausgabe, weil der Staat itemsempty ist, müssen Sie entweder in den Zustand zu items initialisieren oder die Variable items iterieren

var items = [ 
    { name: 'Matthew', link: 'https://bible.com/1/mat.1' }, 
    { name: 'Mark', link: 'https://bible.com/1/mrk.1' }, 
    { name: 'Luke', link: 'https://bible.com/1/luk.1' }, 
    { name: 'John', link: 'https://bible.com/1/jhn.1' } 
]; 

class Home extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      items: items 
     }; 
    }; 

    render(){ 

     var listItems = this.state.items.map(function(item) { 
      return (
       <li key={item.name}> 
        <a className='button' href={item.link}>{item.name}</a> 
       </li> 
      ); 
     }); 

     return (
      <ul> 
       {listItems} 
      </ul> 
     ); 
    } 
} 

render(<Home />,document.getElementById('contain')); 

Answer 2

Ihr Zustand leer. Sie versuchen, map durch leeren Zustand.

Sie sollten den Zustand initialisieren wie folgt:

constructor(props) { 
    super(props); 

    this.state = { 
     items: items 
    }; 
}; 

Oder in Lifecycle-Methode wie folgt:

componentWillMount(){ 
    this.setState({items: items}) 
} 

Oder Sie sollten map durch items wie folgt:

var listItems = items.map(function(item) { 
       return (
        <li key={item.name}> 
         <a className='button' href={item.link}>{item.name}</a> 
        </li> 
       ); 
}); 

Ihre Code sollte so aussehen (Initialisierungszustand mit Lebenszyklusmethode):

import React, {Component} from 'react'; 
import {render} from 'react-dom'; 

    var items = [ 
     { name: 'Matthew', link: 'https://bible.com/1/mat.1' }, 
     { name: 'Mark', link: 'https://bible.com/1/mrk.1' }, 
     { name: 'Luke', link: 'https://bible.com/1/luk.1' }, 
     { name: 'John', link: 'https://bible.com/1/jhn.1' } 
    ]; 

    class Home extends Component { 
     constructor(props) { 
      super(props); 

      this.state = { 
       items: [] 
      }; 
     }; 

     componentWillMount(){ 
      this.setState({items: items}) 
     } 

     render(){ 

      var listItems = this.state.items.map(function(item) { 
       return (
        <li key={item.name}> 
         <a className='button' href={item.link}>{item.name}</a> 
        </li> 
       ); 
      }); 

      return (
       <ul> 
        {listItems} 
       </ul> 
      ); 
     } 
    } 

    render(<Home />,document.getElementById('contain'));