React函数组件中State使用及API调用渲染异常求助

DevOps 小满

2026-8-5

问题分析与修复方案

你的代码有两个核心问题导致无法显示API数据：

1. 普通变量无法触发组件重渲染

React函数组件只有当状态（useState）或属性发生变化时，才会重新渲染并更新UI。你用var items = null定义的是普通变量，即使在fetch回调里给它赋值，React也不会感知到这个变化，自然不会更新页面。

2. 渲染时输出字符串而非变量

你返回的<div>items</div>里的items是字符串字面量，不是你定义的变量。要渲染变量值，必须用大括号{}包裹变量。

修复后的代码

import React, { useState, useEffect } from "react";
import { Row } from "react-bootstrap";
import * as Constants from '../Constants';
import './index.css';

function ActivitySuggestions(){
  // 用useState定义状态，存储API返回的活动数据
  const [activity, setActivity] = useState(null);
  // 用useState定义加载状态，处理数据未返回时的UI
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const url = "https://www.boredapi.com/api/activity";
    fetch(url)
      .then((response) => response.json())
      // 用setActivity更新状态，触发组件重渲染
      .then((json) => {
        setActivity(json);
        setIsLoading(false);
      })
      .catch((error) => {
        console.log(error);
        setIsLoading(false);
      });
  }, []);

  // 根据状态渲染不同UI
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return(
    <div>{activity?.activity}</div>
  );
}

export default ActivitySuggestions