“Each child in an array should have a unique key prop” only on first time render of page

问题

I have a <tr> with a bunch of <td> inside that consists of all users logged in through Instagram. The <tr> is provided a unique key and when I first load the page, I am warned of each child not having a unique key prop. However, when I navigate away from that page OR when I delete the account/re-sign in through Instagram to list the account in the table, the warning doesn't come up anymore. Why does this happen? I'm 99% certain that the key is also unique because I console logged it to check that each <tr> has a different key.

Warning: Each child in an array should have a unique "key" prop. Check the renderComponent call using .

It's a bummer that I can't trace to where the warning is coming from from the console...

Sample code:

component1 = React.createClass({
    render: () ->
        # A lot of table stuff here
        _.chain(@state.users).map((x) -> <component2 profile={x} />),@).value()
)}

component2 = React.createClass({
    render: () ->
        return (
            <tr key={@props.profile.id}
                <td>Blah</td>
                <td>Blah</td>
                <td>Blah</td>
            </tr>
        )
})

回答1:

You need to add the key property where you are rendering <component2>, not where you are defining it:

component1 = React.createClass({
    render: () ->
        # A lot of table stuff here
        _.chain(@state.users).map((x) -> <component2 profile={x} key={x.id} />),@).value()
)}

component2 = React.createClass({
    render: () ->
        return (
            <tr>
                <td>Blah</td>
                <td>Blah</td>
                <td>Blah</td>
            </tr>
        )
})

来源：https://stackoverflow.com/questions/38469068/each-child-in-an-array-should-have-a-unique-key-prop-only-on-first-time-render

标签

html

reactjs

coffeescript

jsx