迭代 ReactJs 中的数据集合答案

【问题标题】：Iteration over a collection of data in ReactJs迭代 ReactJs 中的数据集合
【发布时间】：2017-06-12 09:11:26
【问题描述】：

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

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

索引.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'));

我不明白如何解决它。任何形式的帮助将不胜感激。

【问题讨论】：

代码看起来不错。如果你使用它，我会怀疑 webpack 有问题。

标签： reactjs jsx

【解决方案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'));

【讨论】：

【解决方案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'));

【讨论】：