问题在reactjs

Question

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

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

所以我创建了一个组件＆＃34; ListItemWrapper＆＃34;表示li html元素和＆＃34; LanguageCurrencySwitcher＆＃34;代表两个选择框。

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

一旦进入客户端，我需要遍历两个列表以创建＆＃34; li＆＃34; HTML元素。在迭代期间，如果我使用＆＃34; console.log（result）;＆＃34;输出值，则值将在控制台中正确打印。 但是没有显示组件ListItemWrapper，因此未填充列表，但如果我尝试在循环外显示ListItemWrapper，那么＆＃34; li＆＃34;元素显示正确。

我错过了什么？有人能告诉我怎么解决这个问题？

代码下方：

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} />;
})

请参阅Array::map。