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

我已经创建了一个组件，它在本地服务器上运行良好。但我没有得到警告

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

得到这个警告意味着我们需要修复关键索引道具？如前所述。 下面是我的一些组件代码片段

    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;

---

我们在我的工作代码中使用此选项是否会影响？

如果您的列表顺序不会改变，只需使用：

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

返回
返回

---

它不会影响您的代码，并且会删除警告。

如果

此.state.client

发生任何更改，不要使用索引（这很常见）；了解原因及其影响。您只能使用从不更改的列表，或仅增长/收缩（而不是同时）的列表，而不能使用顺序更改的列表（在开头插入，或排序，或…）

我猜

val

在列表中是唯一的，所以使用它作为

键

：

{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>;
})}

{this.state.client.map（（val，index）=>{
const href=“/users/”+val；
const display=index==this.state.colaborators.length-1？val:`${val}，`；
返回；
})}

您可以使用npm包，如

---

像这样导入它：

import uuid from'react uuid'

并像使用

{item}

一样使用它，如果

this.state.client

中的项更改顺序，这将无法正常工作。这可能会导致一些意外行为。请看一些很好的答案。Eslint总是建议不要使用

索引

作为键，而且由于性能原因，这不是一种正确的方法。很多时间元素除了它们的index@T.J.Crowder我编辑了答案，确保不会发生伤害。除了增加的开销，这与根本不给他们钥匙没有什么不同。这将使React无法优化渲染。您可以使用它来消除警告。我在不同的项目中使用它，从来没有任何性能问题，因为这不是（仅仅）性能问题，而是列表项中没有奇怪的状态问题。请参阅引用的。

{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>;
})}