如何使用ReactJS将控制台中的数据展示到页面？

你的代码存在几处关键问题，导致无法将接口数据渲染到页面卡片中，以下是问题分析和修复方案：

原代码 #

const Newest = () => {
const data = useState([]);

var config = {
  method: 'get',
  maxBodyLength: Infinity,
  url: 'http://ec2-13-213-0-89.ap-southeast-1.compute.amazonaws.com:1337',
  headers: { 
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiaWF0IjoxNjc1OTIyODMwLCJleHAiOjE2Nzg1MTQ4MzB9.fDimJvV3gPtjys5EmxSSevHu_n217YK9X3BfH_IrQq8'
  },
};
axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

return(

    <div className='container'>
      {data.map((data)  => (
          <div className='primary_card' key={data.id}>
            <img src={data.name} alt=''/>
            <h5>{data.title}</h5>
            <p>{data.description}</p>
          </div>
        ))}

    </div>
      
);

};
export default Newest;

问题点 #

• useState使用错误：useState返回的是[状态值, 更新函数]的数组，你没有正确解构，直接用data.map会报错。
• 请求未受控：直接在组件函数体中发起axios请求，会导致组件每次渲染都重复请求，浪费资源。
• 未更新状态：请求成功后仅打印数据，没有将数据存入组件状态，页面无法感知数据变化。
• 图片字段错误：img的src用了data.name，大概率和接口返回的图片字段不匹配，需根据实际结构调整。

修复后的代码 #

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

const Newest = () => {
  // 正确解构状态和更新函数
  const [data, setData] = useState([]);

  // 用useEffect确保仅在组件挂载时发起一次请求
  useEffect(() => {
    const config = {
      method: 'get',
      url: 'http://ec2-13-213-0-89.ap-southeast-1.compute.amazonaws.com:1337',
      headers: { 
        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiaWF0IjoxNjc1OTIyODMwLCJleHAiOjE2Nzg1MTQ4MzB9.fDimJvV3gPtjys5EmxSSevHu_n217YK9X3BfH_IrQq8'
      },
    };

    axios(config)
      .then(response => {
        // 将接口数据存入状态，触发组件重新渲染
        setData(response.data);
      })
      .catch(error => {
        console.error('请求失败:', error);
      });
  }, []); // 空依赖数组限制执行时机

  return (
    <div className='container'>
      {data.map(item => (
        <div className='primary_card' key={item.id}>
          {/* 替换为接口返回的实际图片字段，比如item.image */}
          <img src={item.image} alt={item.title} />
          <h5>{item.title}</h5>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default Newest;

注意事项 #

• 确认已安装axios，并在组件中导入useState和useEffect。
• 核对接口返回的数据结构，确保id、title、description和图片字段名与代码中的一致。
• 为图片添加有意义的alt属性，优化可访问性。

内容的提问来源于stack exchange，提问作者Jose Gerick Encarnacion