JSX无法渲染JavaScript数组及useState未定义问题求助

一、修复 'useState' is not defined 错误 #

React Hooks（如useState）需要在使用它的组件文件中单独导入，仅在index.js导入无法让组件识别。在你的Quests组件所在文件的顶部添加：

import React, { useState, useEffect } from 'react';

（额外导入useEffect，用于解决后续请求循环问题）

二、解决

标签无内容的问题 #

你的代码存在两个核心问题，逐一修复：

1. 异步请求未受控，引发重复请求与初始无数据 #

直接在组件顶层写fetch会导致组件每次渲染都发起请求，既浪费资源又可能触发状态更新循环。用useEffect包裹请求逻辑，确保仅在组件挂载时执行一次：

useEffect(() => {
  fetch(galxeQuestsURL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: queryBody,
  })
  .then(response => response.json())
  .then((jsonData) => {
    console.log('接口返回数据：', jsonData); // 先打印数据，确认是否正常获取
    const tmp = [];
    for (var i=0; i < jsonData.data.campaigns.list.length; i++) {
      tmp.push(jsonData.data.campaigns.list[i].name); // 直接存入字符串，而非嵌套数组
    }
    setQuestsList(tmp);
  })
  .catch((error) => {
    console.error('请求失败：', error);
  });
}, []); // 空依赖数组表示仅在组件挂载时执行一次请求

2. 修正数据格式问题 #

你之前循环中push([name])会让questsList变成二维数组，map渲染时每个quests是数组类型。上面的代码已改为直接存入名称字符串，确保渲染逻辑正常。

3. 可选：添加加载状态优化体验 #

因为请求是异步的，初始渲染时数组为空，可添加加载提示：

return (
  <div>
    <div className="quests_container">
      {questsList.length === 0 ? (
        <p>加载中...</p>
      ) : (
        <ul>{questsList.map((quest, index) => <li key={index}>{quest}</li>)}</ul>
      )}
    </div>
  </div>
);

注意：列表渲染时需添加key属性，建议优先使用数据中的唯一ID（如jsonData.data.campaigns.list[i].id）替代index，避免渲染异常。

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