在 reactjs 中渲染未排序列表的问题

Question

我需要一个 react js 专家来帮助我解决这个问题。

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

所以我创建了一个组件“ListItemWrapper”，它代表一个 li html 元素和一个代表两个选择框的“LanguageCurrencySwitcher”。

调用服务器以获取货币和语言工作正常，信息检索正确。

一旦进入客户端，我需要遍历这两个列表来创建“li”html 元素。在迭代过程中，如果我使用“console.log(result);”输出值，则值会在控制台中正确打印。 但是组件 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

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

你应该这样做

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

见Array::map。