React+Redux项目中Firebase实时数据库拉取数据无法分配id问题

问题根源 #

• 混淆了Firebase实时数据库的节点唯一标识和条目内部字段：遍历response.data拿到的key才是Firebase为每个节点自动生成的唯一ID，你当前取的response.data[key].name是条目内部的字段，由于写入数据时没有给每个条目添加name属性，所以取值为null
• 把key属性加在了Card组件上，但map返回的最外层根元素是<div>，React要求key必须绑定在列表遍历返回的根节点上，这也是触发key警告的原因之一

修复步骤 #

1. 修改数据拉取的id赋值逻辑 #

把id赋值为遍历得到的Firebase节点key即可，该值天生全局唯一，不需要额外维护：

export const FetchPost = () => {
    return dispatch => {
        dispatch(FetchPostStart());
        axios.get('/Data.json')
        .then(response => {
            const fetchedData = [];
           for(let key in response.data){
                   fetchedData.push({
                   ...response.data[key],
                   // 用Firebase生成的节点key作为唯一id
                   id: key
               });
           }
           // 可打开下方注释验证id是否正确生成
           // console.log('处理后的数据：', fetchedData)
           dispatch(FetchPostSuccess(fetchedData));
        })
        .catch(error => {
            dispatch(FetchPostError(error));
        });
    }
}

2. 修正渲染时的key绑定位置 #

把key绑定到map返回的最外层元素上，两种可选写法：

// 方案1：保留外层div，把key移到div上
{this.props.data.reverse().map((res) => (    
  <div key={res.id}>
    <Card
      className="Cards"
    >
    {/* Card内部内容 */}
    </Card>
  </div>
))}

// 方案2：去掉冗余外层div，key直接绑定到Card上
{this.props.data.reverse().map((res) => (    
  <Card
    key={res.id}
    className="Cards"
  >
  {/* Card内部内容 */}
  </Card>
))}

3. 验证效果 #

修改完成后刷新页面，控制台的key警告会自动消失，所有条目都会被分配唯一的非空id。

补充说明 #

如果你确实需要使用条目内部的name作为唯一id，需要先确认写入Firebase时所有条目都存在name字段，且值全局唯一，否则仍会出现重复key的问题，常规开发场景下优先推荐使用Firebase生成的节点key作为唯一标识。

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