首次使用Strapi：React应用仅显示ID无法获取其他数据求助

• 先核对Strapi返回的JSON结构
  Strapi v4默认将实际业务字段嵌套在attributes中，外层还有data数组包裹，返回结构大致如下：

  {
    "data": [{"id":1,"attributes":{"title":"测试标题","content":"测试内容"}}],
    "meta":{"pagination":{...}}
  }
  

  若你直接写post.title肯定拿不到数据，必须访问post.attributes.title。对照你截图里的返回数据，确认是否存在该嵌套结构。

• 检查字段级权限配置
  不要只开启内容类型的get/getOne整体权限，需进入Strapi后台→设置→角色与权限→公共角色→对应内容类型的权限→编辑权限，把需要返回的字段（如标题、内容等）逐一勾选，保存后重启Strapi再重新请求。

• 修正React代码的数据解析逻辑
  很多新手会忽略Strapi的嵌套结构，直接将整个响应存入状态。以下是正确示例：

  // 数据请求部分
  fetch('http://localhost:1337/api/你的内容类型')
    .then(res => res.json())
    .then(res => setItems(res.data)) // 取外层的data数组，而非整个响应对象
  
  // 渲染部分
  {items.map(item => (
    <div key={item.id}>
      <h3>{item.attributes.你的字段名}</h3>
    </div>
  ))}
  

  对照你的React代码，确认是否遗漏了上述嵌套字段的访问逻辑。

• 再次确认内容发布状态
  即便你声称内容已发布，仍需检查内容条目右上角是否显示「已发布」——草稿状态的内容，即使开了权限也不会返回给公共角色。

• 排查CORS配置（概率较低但需确认）
  若浏览器控制台有CORS报错，可能导致数据截断，但你能拿到ID的话大概率不是此问题。保险起见，检查Strapi的config/middlewares.js里的cors配置，确保允许你的React域名：

  module.exports = [
    // ...其他中间件
    {
      name: 'strapi::cors',
      config: {
        origin: ['http://localhost:3000'], // 替换为你的React项目地址
        methods: ['GET', 'POST', 'PUT', 'DELETE'],
        credentials: true,
      },
    },
  ];
  

内容的提问来源于stack exchange，提问作者Péter Nagy