从FaunaDB获取分页数据后如何在React前端访问目标数据

你遇到的问题核心是FaunaDB返回结构存在两层data字段：

1. 最外层的data是你要遍历的数组
2. 数组内每个元素的data才是存储letter、extra字段的业务对象

正确处理步骤 #

• 第一步：请求拿到响应后，把最外层的data数组存入React状态，注意初始值要设为空数组，避免首次渲染报错

import { useState, useEffect } from 'react'

function LetterList() {
  // 初始值设为空数组
  const [letters, setLetters] = useState([])

  useEffect(() => {
    // 这里替换为你实际调用FaunaDB的请求逻辑
    fetch('/your-fauna-api')
      .then(res => res.json())
      .then(res => {
        // 存入最外层的data数组
        setLetters(res.data)
      })
  }, [])

  return (
    <ul>
      {/* 遍历letters数组，访问每个元素的.data下的字段 */}
      {letters.map(item => (
        <li key={item.ref.value.id}>
          字母：{item.data.letter}，备注：{item.data.extra}
        </li>
      ))}
    </ul>
  )
}

export default LetterList

• 常见map不生效的排查点：
  • 不要直接拿整个响应对象遍历，只有最外层的data是数组类型才能调用map方法
  • 如果用Fauna官方JS驱动，返回的ref是内置对象，取唯一key用item.ref.id即可，不需要加.value

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