如何从Firebase Realtime Database获取对象类型而非数组类型的数据

你的代码默认请求返回的结果是数组结构，扩展运算符...仅能在数组字面量中展开可迭代对象（比如数组）。当Firebase Realtime Database返回键值对结构的对象时，直接对对象执行数组扩展不会得到有效内容，所以最终data是空数组。

补充说明：Firebase Realtime Database只有当节点下的子元素都是连续数字key时才会返回数组结构，其他场景都会返回对象结构，所以必须做格式兼容。

先对接口返回的结果做格式判断，将对象转为数组后再存入state：

• 如果不需要保留外层的key（即示例中的恐龙名称），可以直接用Object.values()取出所有属性值组成数组
• 如果需要保留外层key作为数据的name字段，可以用Object.entries()遍历键值对后重组数据

makeRemoteRequest = () => {
  const { page } = this.state
  const url = `https://example-default-rtdb.firebaseio.com/dinosaur.json`
  this.setState({ loading: true })

  fetch(url)
    .then(res => res.json())
    .then(res => {
      // 格式处理逻辑，兼容数组和对象返回结果
      const processedData = Array.isArray(res) 
        ? res 
        // 如果需要保留外层的恐龙名称作为name字段，替换成下面这行即可
        // : Object.entries(res).map(([name, detail]) => ({name, ...detail}))
        : Object.values(res)

      this.setState({
        // 同时修正原分页逻辑：page为1时应该重置数据，不需要拼接历史data
        data: page === 1 ? processedData : [...this.state.data, ...processedData],
        error: res.error || null,
        loading: false,
        fullData: processedData
      })
    })
    .catch(error => {
      this.setState({ error, loading: false })
    })
}

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