您可以通过多种方式创建
unique keys，最简单的方法是在迭代数组时使用索引。
例
var lists = this.state.lists.map(function(list, index) { return( <div key={index}> <div key={list.name} id={list.name}> <h2 key={"header"+list.name}>{list.name}</h2> <ListForm update={lst.updateSaved} name={list.name}/> </div> </div> ) });无论您将数据放在何处
this.state.lists.map，都可以在此处将第二个参数传递
function(list, index)
给回调，这将是它的
index值，并且对于数组中的所有项目都是唯一的。
然后您可以像
<div key={index}>您也可以在这里做
var savedLists = this.state.savedLists.map(function(list, index) { var list_data = list.data; list_data.map(function(data, index) { return ( <li key={index}>{data}</li> ) }); return( <div key={index}> <h2>{list.name}</h2> <ul> {list_data} </ul> </div> ) });编辑
但是，正如用户Martin Dawson在下面的评论中指出的那样，这并不总是理想的。
那么解决方案是什么？
许多
- 您可以创建一个函数来生成唯一的键/ id /数字/字符串并使用
- 您可以使用现有的npm软件包，例如uuid，uniqid等
- 您还可以生成随机数，例如，
new Date().getTime();
并在要迭代的项目中添加前缀，以保证其唯一性 - 最后，我建议使用从数据库中获得的唯一ID（如果有）。
例：
const generateKey = (pre) => { return `${ pre }_${ new Date().getTime() }`;}const savedLists = this.state.savedLists.map( list => { const list_data = list.data.map( data => <li key={ generateKey(data) }>{ data }</li> ); return( <div key={ generateKey(list.name) }> <h2>{ list.name }</h2> <ul> { list_data } </ul> </div> )});
