react-admin中unique key prop警告的成因及优化修复方案

警告原因 #

这个警告是React的基础规则导致的：当你渲染组件数组（比如createInputs返回的组件列表）时，每个子组件必须拥有唯一的key属性，React需要通过key来跟踪每个元素的状态和变化，避免不必要的DOM重渲染。

你手动设置key={null}后警告消失，是因为React检测到key属性存在（哪怕值是null），暂时停止了警告触发，但这是治标不治本的做法——null并不是唯一标识，当数组元素顺序变化或重复时，依然可能引发渲染异常。

更优修复方案 #

既然createInputs是通过components.push(<C {...props} />)生成组件数组，最佳做法是给每个组件绑定唯一且稳定的key：

• 利用react-admin输入组件的source属性：因为每个输入框对应的数据字段source通常是唯一的，直接用它作为key最稳妥：

  // 在createInputs的push逻辑中添加key
  components.push(<C {...props} key={props.source} />)
  

• 如果存在动态生成的重复字段（比如同一source的多个输入），可以结合索引或唯一ID生成key，例如：

  // 假设index是当前组件在数组中的序号
  components.push(<C {...props} key={`${props.source}-${index}`} />)
  

关于文档未提及的原因 #

这个key要求并不是react-admin的特有规则，而是React处理列表渲染的通用要求。当你直接在<SimpleForm>下写单个输入组件时，不属于数组列表渲染，所以不需要key；但通过函数返回组件数组的方式属于列表渲染，这时候就必须遵循React的key规则，因此react-admin文档不会专门针对这种场景额外说明。

内容的提问来源于stack exchange，提问作者Sam Bull