在reactjs中发布未排序列表的呈现

Question

我需要一个反应专家来帮我解决这个问题。

我正在学习react，作为第一次尝试，我想创建一个组件，它表示两个选择框，一个用于不同的货币，另一个用于应用程序中允许的不同语言。

因此，我创建了一个组件"ListItemWrapper“，它表示一个li html元素，"LanguageCurrencySwitcher”表示这两个复选框。

对服务器获取货币和语言的调用运行良好，信息被正确检索。

一旦进入客户端，我需要遍历两个列表来创建"li“html元素。在迭代期间，如果我使用“console.log(结果)；”输出值，则这些值将正确地打印在控制台中。但是，组件ListItemWrapper没有显示，因此列表没有填充，但是如果我试图在循环之外显示ListItemWrapper，则"li“元素将被正确显示。

我遗漏了什么？有人能告诉我怎么解决这个问题吗？

守则如下：

var ListItemWrapper = React.createClass({

render: function () {
    console.log("title:" + this.props.title);
    return <li onClick={this.handleClick}><a href="#">{this.props.title}</a></li>
},

handleClick: function (event) {
    console.log(event.target);
}
});


var LanguageCurrencySwitcher = React.createClass({


getInitialState: function () {

    return {data: {currencies: [], languages: []}};

},

render: function () {
    return <ul className="switchers">
        <li>$
            <ul className="dropdown">
                {
                    this.state.data.currencies.forEach(function(result){
                        console.log(result);
                        <ListItemWrapper title={result} />
                    })
                }
            </ul>
        </li>
        <li>En
            <ul className="dropdown">
                {
                    this.state.data.languages.forEach(function(result){
                        console.log(result);
                        <ListItemWrapper  title={result} />
                    })

                }
            </ul>
        </li>
    </ul>
},


componentDidMount: function () {
    $.get('/std/rest/data/switchers', function (result) {
        console.log(result);
        if (this.isMounted()) this.setState({data: result});
    }.bind(this));
},




});


ReactDOM.render(
<LanguageCurrencySwitcher/>,
document.getElementById('language-currency-switcher')
);

Answer 1

当您应该使用.forEach()时，您正在使用.map()。

你应该做的

this.state.data.currencies.map(function(result){
  return <ListItemWrapper title={result} />;
})

见阵列：：地图。