ハッシュ内のすべてのキーを反復処理しようとしていますが、ループから出力が返されません。 console.log()
は期待どおりに出力します。 JSXが正しく返され、出力されない理由は何ですか?
var DynamicForm = React.createClass({
getInitialState: function() {
var items = {};
items[1] = { name: '', populate_at: '', same_as: '',
autocomplete_from: '', title: '' };
items[2] = { name: '', populate_at: '', same_as: '',
autocomplete_from: '', title: '' };
return { items };
},
render: function() {
return (
<div>
// {this.state.items.map(function(object, i){
// ^ This worked previously when items was an array.
{ Object.keys(this.state.items).forEach(function (key) {
console.log('key: ', key); // Returns key: 1 and key: 2
return (
<div>
<FieldName/>
<PopulateAtCheckboxes populate_at={data.populate_at} />
</div>
);
}, this)}
<button onClick={this.newFieldEntry}>Create a new field</button>
<button onClick={this.saveAndContinue}>Save and Continue</button>
</div>
);
}
Object.keys(this.state.items).forEach(function (key) {
Array.prototype.forEach()
は何も返しません-代わりに.map()
を使用してください:
Object.keys(this.state.items).map(function (key) {
var item = this.state.items[key]
// ...
ショートカットは次のとおりです。
Object.values(this.state.items).map({
name,
populate_at,
same_as,
autocomplete_from,
title
} => <div key={name}>
<FieldName/>
<PopulateAtCheckboxes populate_at={data.populate_at} />
</div>);