我们可以在React.js中传递假键给子节点吗?

Question

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

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;

我从这里检查了一些解决方案

正如我所说，我的代码工作得很好。我们可以用一些假的关键道具吗?例如

key={fake index}

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

Answer 1

如果this.state.client发生变化，不要只需使用索引(这很常见);请参阅这篇文章，了解其中的原因以及可能出现问题的示例。你只能用一个永远不会改变的列表，或者只增长/缩小的列表(而不是同时)，不能用一个顺序改变的列表(你在开始插入，排序，或者…)更多信息见文档

我猜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>

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