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

Question

我创建了一个组件，它在本地服务器上运行良好。但我的警告低于警告

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

收到此警告意味着我们需要修复关键索引道具？如给定here。 下面是我的组件代码的一些 sn-ps..

    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;

我检查了一些解决方案from here

正如我所说，我的代码运行良好。我们可以使用一些假钥匙道具吗？例如

key={fake index}

我们正在使用这会影响我的工作代码吗？

Answer 1

如果this.state.client 发生变化，不要只使用索引（可悲的是，这很常见）；请参阅this article 了解原因及其demo of what can go wrong。您只能使用永远不会更改或仅增长/缩小（而不是同时）的列表来执行此操作，而不能使用顺序更改的列表（您在开头插入，或排序，或...）@987654323 @。

我猜val 在列表中将是唯一的，所以将其用作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

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

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

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