React中如何打印对象内的数组？Flask接口数据渲染求助

第一步：修正Fetch数据的处理逻辑 #

fetch默认返回的是Response对象，不能直接作为状态值，必须先解析成JSON格式，再提取values数组：

// 正确的fetch示例
fetch('/eu/hostnames')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json(); // 解析为JSON对象
  })
  .then(data => {
    // 提取values数组存入状态，而非整个响应对象
    setHostnames(data.values);
  })
  .catch(error => {
    console.error('获取数据出错:', error);
  });

第二步：初始化状态为数组 #

确保组件初始状态是空数组，避免第一次渲染时map调用在非数组上触发错误：

const [hostnames, setHostnames] = useState([]);

第三步：正确遍历渲染数组 #

直接对状态里的数组使用map，每个元素渲染成对应组件，记得添加唯一key属性：

return (
  <div className="tab-content">
    <h3>服务器列表</h3>
    {hostnames.length === 0 ? (
      <p>加载中...</p>
    ) : (
      <ul>
        {hostnames.map((hostname, index) => (
          <li key={index}>{hostname}</li>
        ))}
      </ul>
    )}
  </div>
);

若需存储整个响应对象 #

如果必须把完整响应对象存在状态里，渲染时要先判断values是否存在，再遍历：

const [responseData, setResponseData] = useState({ values: [] });

// fetch时存储整个对象
.then(data => setResponseData(data));

// 渲染逻辑
return (
  <div>
    {responseData.values?.map((name, idx) => (
      <div key={idx}>{name}</div>
    ))}
  </div>
);

这里用可选链操作符?.，避免responseData.values为undefined时触发错误。

调试技巧 #

如果仍有问题，可在then回调里打印数据确认结构：

.then(data => {
  console.log('接口返回数据:', data); // 检查是否为{values: [xxx, xxx]}结构
  setHostnames(data.values);
})

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