1
で子供を反応するオブジェクトのようにエラーを取得することは有効ではありません
私は、供給されたデータと同様にReactJs
var todos = [
{
task: 'A',
isComplete: false
},
{
task: 'B',
isComplete: true
}
]とtodolistのような出力を期待してコードを書いたが、エラー オブジェクトは有効ではありませんガイドリアクションの子として（見つかった：キーのあるオブジェクト{task, isComplete}）。子供のコレクションをレンダリングする場合は、代わりに配列を使用するか、のを使用してオブジェクトをラップします。レンダリング方法がTodolistであることを確認します。 私のコードは、unique値を持っている必要がありますし、あなたがキーとして、あるいはtaskだけのユニークなを持っている場合indexを使用することができ、この場合には、Objectすることはできません
var todos = [
{
task: 'A',
isComplete: false
},
{
task: 'B',
isComplete: true
}
]
var App = React.createClass({
getInitialState:function(){
return ({
data:todos
});
},
render: function() {
return (
<div className="well">
<h1 className="well text-primary text-center">React ToDo App</h1>
<Todolist data={this.state.data}/>
</div>
);
}
});
var Todolist = React.createClass({
render: function() {
var abc = this.props.data.map(function(value){
return(
<td key={value}>{value}</td>
);
});
return (
<div>
<table className="table table-bordered">
<thead>
<tr>
<th>Task</th>
<th>IsCompleted</th>
</tr>
</thead>
<tbody>
<tr>
{abc}
</tr>
</tbody>
</table>
</div>
);
}
});
ReactDOM.render(
<App/>,
document.querySelector("#app")
);<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="app">
<!-- This element's contents will be replaced with your component. -->
</div>