React使用Fetch/AXIOS获取Drupal JSON数据渲染页面空白问题求助

可能的原因及排查解决步骤 #

• CORS跨域拦截问题
  Postman请求不受浏览器同源策略限制，所以可以正常拿到数据，但React运行在浏览器中时，如果前端域名和Drupal接口域名不一致、Drupal未配置跨域允许规则，请求会被浏览器直接拦截，无有效数据返回。你可以按F12打开浏览器控制台，查看是否有跨域相关报错，如有则需要在Drupal端配置CORS规则：安装Drupal CORS模块，或修改sites/default/services.yml中的cors.config配置项，添加你的React应用域名到允许列表。
• 请求数据处理逻辑错误
  很多开发者使用fetch时会遗漏response.json()的异步处理步骤，直接把响应对象赋值给状态，导致拿到的不是可用的JSON数据；也有可能是请求返回的根结构不是你预期的文章数组，比如Drupal输出的JSON外层包裹了rows等字段，直接赋值会导致posts始终为空。
  你可以在App.js中参考如下写法调整请求逻辑，同时打印返回数据确认结构：

import React, { useState, useEffect } from 'react'
import Posts from './Posts'

function App() {
  // 初始化必须为数组，否则map方法会报错
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch('替换为你的Drupal接口地址')
      .then(res => {
        // 先判断请求是否成功
        if (!res.ok) throw new Error(`请求错误，状态码：${res.status}`)
        // 必须调用json()方法解析响应体
        return res.json()
      })
      .then(data => {
        // 打印完整返回数据，确认你要的文章数组对应的字段
        console.log('接口完整返回数据：', data)
        // 示例：如果实际数组在data.rows下，就改为setPosts(data.rows)
        setPosts(data)
      })
      .catch(err => console.error(err))
  }, [])

  return <Posts posts={posts} />
}

export default App

• 字段名或结构不匹配
  从你提供的组件代码看，你使用了post.node.Nid、post.node.Body这类大写字段名，而Drupal默认输出的字段名都是小写格式，如nid、body，也有可能你的返回数据中每一项直接是node对象，不需要额外加.node层。你可以通过上一步的控制台打印结果，确认每个字段的实际名称和嵌套层级，对应修改组件内的字段引用即可。
• React语法不规范问题
  组件内你使用了原生HTML的class属性定义样式类，在React中必须改为className，否则属性不会生效，同时循环渲染的列表项必须添加唯一key属性，否则会触发React运行时错误，虽然这类问题不一定直接导致页面空白，但也需要修正避免后续异常。
  修正后的Posts组件示例：

import React from 'react'

const Posts = ({ posts }) => {
  return (
    <div>
      <center><h1>Articles Post List</h1></center>
      {posts.map((post, index) => (
        // 循环项必须加唯一key属性，避免React报错
        <div className="article" key={index}>
          <div className="article-body">
            {/* 这里的字段要和实际返回的字段名完全一致 */}
            <h5 className="article-id">{post.nid}</h5>
            <h6 className="article-title">{post.title}</h6>
            <p className="article-text">{post.body}</p>
          </div>
        </div>
      ))}
    </div>
  )
};

export default Posts

内容的提问来源于stack exchange，提问作者xceedia-media