React函数组件调用Node.js接口无响应但类组件正常，如何解决

• 1. 请求地址错误
     函数组件中定义的请求地址为http://localhost:9000/，与实际可用的接口地址http://localhost:9000/testApi不符，类组件中使用的是正确的接口地址。
• 2. Fetch返回值处理逻辑错误
     原生fetch请求返回的是Response对象，不存在data属性，需要先调用对应的方法解析返回内容：
     你的接口返回的是纯文本字符串API is working fine，不是JSON格式。类组件中正确调用了res.text()解析文本内容，而函数组件直接读取不存在的res.data，且默认解析逻辑会尝试将非JSON的返回值按JSON处理，就会触发报错：

  Promise {}[[Prototype]]: Promise [[PromiseState]]: "rejected" [[PromiseResult]]: SyntaxError: Unexpected token A in JSON at position 0

按如下步骤修改函数组件代码即可：

1. 将请求地址替换为正确的接口地址
2. 补充res.text()步骤解析返回的纯文本内容，再更新state

修正后的函数组件代码 #

import React, {useState, useEffect} from 'react';
import TopicCard from './TopicCard.js'
import './HomePage.css'

function HomePage() {
  const [apiResponse,setApiResponse] = useState('Loading..')
  const url = "http://localhost:9000/testApi" // 修正为正确的接口地址

  useEffect(() => {
    fetch(url)
      .then(res => res.text()) // 补充解析文本的步骤
      .then(text => setApiResponse(text)) // 用解析后的文本更新state
  }, [])

  return (
    <> 
        <h1>Choose a topic to learn {apiResponse}</h1>
    </>
  );
}

export default HomePage;

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