React中如何访问嵌套数组属性？渲染API数据失败求助

1. 初始State类型错误 #

你将questions的初始值设为了对象{}，但map方法仅能用于数组。组件第一次渲染时还未获取到API数据，此时尝试对对象调用map会直接抛出错误，导致渲染失败。

修正：
将初始State改为空数组：

const [questions, setQuestions] = useState([])

2. Key属性未正确定义 #

代码中使用的key={id}里，id变量并未定义。React要求列表项的key必须是每个元素的唯一标识，需从遍历的item中提取对应字段（假设每个question和clue都有id属性）：

修正：

{questions.map((question) => (
  <div key={question.id}>
    {question.questions.map((clue) => (
      <div key={clue.id}>
        <h2>{clue.clue1}</h2>
      </div>
    ))}
  </div>
))}

3. 未处理异步加载的空状态 #

API请求是异步操作，数据返回前questions为空数组（虽然数组可以调用map，但无内容），如果需要更友好的提示，或者防止数据结构异常报错，可以增加加载状态判断：

修正：

return (
  <div>
    {questions.length === 0 ? (
      <div>加载中...</div>
    ) : (
      <div>
        {questions.map((question) => (
          <div key={question.id}>
            {question.questions.map((clue) => (
              <div key={clue.id}>
                <h2>{clue.clue1}</h2>
              </div>
            ))}
          </div>
        ))}
      </div>
    )}
  </div>
)

4. API数据结构匹配问题 #

确认API返回的数据结构是否与渲染逻辑匹配：

• 如果API返回的是包含questions数组的对象（比如{ questions: [...] }），则需要在setQuestions时提取数组：

  .then((data) => {
    setQuestions(data.questions) // 而非直接setQuestions(data)
  })
  

• 如果API直接返回数组，则当前setQuestions(data)正确，但必须保证初始State是数组。

5. 可选链避免嵌套结构报错 #

若存在某个question没有questions数组的情况，直接调用map会报错，可使用可选链操作符做安全判断：

修正：

{questions.map((question) => (
  <div key={question.id}>
    {question.questions?.map((clue) => (
      <div key={clue.id}>
        <h2>{clue.clue1}</h2>
      </div>
    ))}
  </div>
))}

完整修正后的代码 #

export const SingleClue = () => {
  const [questions, setQuestions] = useState([])

  const fetchData = () => {
    fetch('https://final-project-api-veooltntuq-lz.a.run.app/questions')
      .then((response) => response.json())
      .then((data) => {
        // 根据API返回结构调整，若返回对象则取data.questions
        setQuestions(data)
      })
      .catch(err => console.error('数据请求失败:', err)) // 增加错误捕获
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <div>
      {questions.length === 0 ? (
        <div>加载中...</div>
      ) : (
        <div>
          {questions.map((question) => (
            <div key={question.id}>
              {question.questions?.map((clue) => (
                <div key={clue.id}>
                  <h2>{clue.clue1}</h2>
                </div>
              ))}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

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