React访问Firebase Realtime Database时commandes调用map方法报错如何解决

问题原因 #

报错TypeError: commandes.map is not a function的根本原因是从Firebase Realtime Database拉取返回的commandes字段为普通对象类型，不具备数组的map方法。

之所以替换为developers节点后可以正常运行，是Firebase Realtime Database的自动类型转换规则导致的：

• 当节点下的子键为从0开始的连续数字时，Firebase会自动将该节点解析为数组类型返回
• 当节点下的子键为不连续数字、字符串类型时，Firebase会返回普通对象类型
  你的developers节点使用了符合数组规则的有序数字键，返回值为数组；而commandes节点使用时间戳字符串作为自定义键，返回值为对象，因此无法调用map方法。

解决方案 #

修改数据拉取逻辑，将返回的commandes对象手动转换为数组即可，修改后的getData方法示例：

getData = () => {
  let ref = firebase.database().ref("/");
  ref.on("value", snapshot => {
    const state = snapshot.val();
    // 处理commandes类型：对象转数组，无数据时默认返回空数组
    const formattedCommandes = state.commandes ? Object.values(state.commandes) : []
    this.setState({
      ...state,
      commandes: formattedCommandes
    });
  });
};

也可以在渲染层增加类型兼容判断，避免其他场景下的类型报错：

render() {
  const { commandes } = this.state;
  // 统一转为数组后再执行map
  const commandesList = Array.isArray(commandes) ? commandes : Object.values(commandes || {})
  return (
    <React.Fragment>
      {commandesList.map(item => (
        <div
          key={item.name}
          className="card float-left"
          style={{ width: "18rem", marginRight: "1rem" }}
        >
        </div>
      ))}
    </React.Fragment>
  )
}

你当前的sendCommande写入逻辑不需要修改，仅需在读取后增加上述类型转换步骤即可正常运行。

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