React中能否在useState中调用函数并使用其返回数据？

你的代码存在几个关键问题导致无法正常获取并渲染数据，同时完全可以实现无刷新触发请求，具体修复如下：

1. 核心问题拆解 #

• 组件不能是异步函数：React组件必须同步返回JSX，async function AMZNuseState()这种写法会让组件返回Promise，直接导致渲染失败。
• useState初始值错误：getAMZN()是异步函数，返回的是Promise，你把它放到数组里作为初始值，导致AMZN是一个包含Promise的数组，自然无法访问price/volume属性。
• no-cors模式的限制：使用mode:"no-cors"时，fetch返回的是不透明响应，无法读取响应内容（包括调用response.json()），这会直接导致数据解析失败。

2. 修复后的完整代码 #

// 数据获取函数
function getAMZN() {
  return fetch("http://127.0.0.1:31324/AMZN")
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP Error: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error(`Could not get data: ${error}`);
      return null; // 出错时返回null，避免渲染报错
    });
}

// React组件（同步函数）
function AMZNComponent() {
  // 初始化状态为null，等待数据加载
  const [AMZN, setAMZN] = React.useState(null);

  // 组件挂载时触发数据请求（无需页面刷新）
  React.useEffect(() => {
    // 调用异步获取函数，更新状态
    getAMZN().then(data => {
      if (data) {
        setAMZN(data);
      }
    });
  }, []); // 空依赖数组：只在组件首次挂载时执行一次

  // 数据未加载时显示占位内容
  if (!AMZN) {
    return <div>加载中...</div>;
  }

  // 数据加载完成后渲染内容
  return (
    <div>
      <h1>AMZN</h1>
      <p>Price: {AMZN.price}</p>
      <p>Volume: {AMZN.volume}</p>
      <p>Last Five: </p>
    </div>
  );
}

3. 关键优化点说明 #

• 用useEffect触发异步请求：useEffect是React处理副作用（比如数据获取）的标准方式，空依赖数组[]确保请求只在组件挂载时执行一次，全程无需页面刷新。
• 移除no-cors模式：如果你的后端没有配置跨域，需要在后端添加跨域允许头（比如Access-Control-Allow-Origin），no-cors模式下根本无法读取响应数据，完全起不到作用。
• 添加加载状态：避免数据未返回时渲染AMZN.price导致报错，先判断数据是否存在，不存在时显示加载提示。
• 组件改为同步函数：确保组件直接返回JSX，异步逻辑放在useEffect内部处理。

4. 手动触发请求（可选） #

如果需要手动触发请求（比如点击按钮刷新数据），可以添加触发逻辑：

function AMZNComponent() {
  const [AMZN, setAMZN] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  // 提取请求逻辑为独立函数
  const fetchAMZNData = () => {
    setLoading(true);
    getAMZN().then(data => {
      setAMZN(data);
      setLoading(false);
    });
  };

  // 挂载时自动请求
  React.useEffect(() => {
    fetchAMZNData();
  }, []);

  return (
    <div>
      <h1>AMZN</h1>
      <button onClick={fetchAMZNData} disabled={loading}>
        {loading ? "刷新中..." : "刷新数据"}
      </button>
      {loading ? <div>加载中...</div> : (
        AMZN ? (
          <>
            <p>Price: {AMZN.price}</p>
            <p>Volume: {AMZN.volume}</p>
            <p>Last Five: </p>
          </>
        ) : <div>加载失败，请重试</div>
      )}
    </div>
  );
}

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