对ReactJs中的数据集合进行迭代

Question

我一直在尝试迭代React中的数据集合。它不会给我任何控制台中的错误，但它说

[HMR]等待来自WDS的更新信号... [WDS]启用热模块更换。

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

我不知道如何解决它。任何形式的帮助，将不胜感激。

Answer 1

你没有得到任何输出，因为状态items是empty，你需要或者初始化状态items或迭代变量items

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

你状态是空的。您正试图通过空状态map。

你应该初始化状态如下：

constructor(props) { 
    super(props); 

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

或者在生命周期的方法如下：

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

还是应该map通过items如下：

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

你代码应该看起来像这样（初始化状态与生命周期方法）：

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