JanGaJan.com

Is fun? JOY!

Warning: Each Child in an Array or Iterator Should Have a Unique “Key” Prop.

最近 reactをいじっています。

taskの配列をもつ、TaskListというコンポーネントの中で、TaskCardという子コンポーネントをループで回して生成しているところでwarningが発生した。

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of TaskList. See http://fb.me/react-warning-keys for more information.

ソースは↓

1
2
3
4
5
6
7
8
@TaskList = React.createClass
  render: ->
    tasks = @props.tasks.map (task) ->
      `<TaskCard task={task}></TaskCard>`
    `<div className="list-group">
      { tasks }
    </div>
    `

key というユニークになる情報をコンポーネントに持たせろよと。 じゃぁ、と思って、task自体を設定した。

1
2
3
4
5
6
7
8
@TaskList = React.createClass
  render: ->
    tasks = @props.tasks.map (task) ->
      `<TaskCard key={task} task={task}></TaskCard>`
    `<div className="list-group">
      { tasks }
    </div>
    `

そしたらこんなエラーが。

Warning: flattenChildren(…): Encountered two children with the same key, .$[object Object]. Child keys must be unique; when two children share a key, only the first child will be used.

indexなんかをもたせてあげないといけないらしい。

1
2
3
4
5
6
7
8
@TaskList = React.createClass
  render: ->
    tasks = @props.tasks.map (task, i) ->
      `<TaskCard key={i} task={task}></TaskCard>`
    `<div className="list-group">
      { tasks }
    </div>
    `

taskidが一意になるなら、task.id としてもいいかも

Comments