当每个键已经是唯一的时，列表中的每个孩子都应该有一个唯一的“键”警告

Question

Can somebody tell me why I get Each child in a list should have a unique "key" prop even after I created a unique key for every element?

I can access every key by keys[index].tag-name from the keys object array and verify that it is unique.

return (
    Object.entries(props.values).map(([key, value], index) => (
        <div>
            <span key={keys[index].span} />
            <p key={keys[index].p} />
        </div>
    ))
);

// key format "c98301e0-f2bd-4442-a829-407e6beecf0d"

Answer 1

You must add key property to a parent element. In your case that's a div .

return (
    Object.entries(props.values).map(([key, value], index) => (
        <div key={keys[index].span} >
            <span/>
            <p key={keys[index].p} />
        </div>
    ))
);

Answer 2

Try to put the key into div, maybe this can solve your problem

return (
    Object.entries(props.values).map(([key, value], index) => (
        <div key={keys[index].span}>
            <span  />
            <p  />
        </div>
    ))
);

Answer 3

You have to add the key to the parent that is being returned, here div

return (
    Object.entries(props.values).map(([key, value], index) => (
        <div key={keys[index].div}>
            <span />
            <p />
        </div>
    ))
);