我们可以在 React.js 中将假密钥传递给孩子吗？

Question

I have created a component and it's running well in local server. But I am getting below warning

Warning: Each child in a list should have a unique "key" prop.

Getting this warning means we need to fix the key index props? as given here . below is some snippets of my component code..

    render() {
        return (
            <div>
                        <Container>                                                           
                            <Row>                                                           
                                <Col className="col-12">
                                {this.state.client.map((val,index)=>{
                                    if(index == this.state.colaborators.length -1)
                                        return <a href={"/users/"+val}>{val}</a>
                                    return <a href={"/users/"+val}>{val} ,</a>
                                })}
                                </Col>                                                              
                            </Row>
                        </Container>             
                    </div>
                </div>
            </div >
        );
    }
}

export default App;

I checked some solution from here

As I told my code is working well. Can we use some fake key props? for example

key={fake index}

And we are using will this affect in my working code?

Answer 1

If this.state.client ever changes, don't just use the index (which is sadly common); see this article for why and its demo of what can go wrong . You can only do that with a list that never changes, or only grows/shrinks (and not at the same time), not with one where the order changes (you insert at the beginning, or sort, or...) More in the docs .

I'm guessing val will be unique in the list, so use that as the key :

{this.state.client.map((val, index) => {
    const href = "/users/" + val;
    const display = index == this.state.colaborators.length - 1 ? val : `${val} ,`;
    return <a key={val} href={href} >{display}</a>;
})}

Answer 2

If your lists order is not going to change, simply use:

  return <a key={index} href={"/users/"+val}>{val}</a>
     return <a key={index} href={"/users/"+val}>{val} ,</a>

It will not affect your code and it will remove the warning.

Answer 3

You can use a npm package like UUID

import it like: import uuid from 'react-uuid' and use it like <li key={uuid()}>{item}</li>