React/Next.js中如何判断数组是否为空再执行遍历？

首先，你的初始状态中students.data被设为字符串''，但接口返回的是数组类型，这会导致初始阶段调用map时直接报错（字符串没有map方法）。先修正初始状态：

const [students, setStudents] = useState({
  data: [], // 改为空数组，和接口返回类型保持一致
  loading: true
})

接下来，通过条件渲染实现“仅当数组有数据时才执行遍历”的需求，同时结合loading状态优化用户体验：

方式1：基础条件判断 #

直接判断students.data的长度，大于0时再渲染列表：

{!students.loading && students.data.length > 0 ? (
  students.data.map((caseStudy) => (
    <a key={caseStudy.id}>{caseStudy.title}</a> // 必须添加唯一key，满足React列表渲染要求
  ))
) : !students.loading ? (
  <p>暂无学生数据</p> // 数组为空时显示提示文本
) : (
  <p>加载中...</p> // 加载状态时的提示
)}

方式2：简化判断（可选链+空值合并） #

利用ES6的可选链操作符?.和空值合并操作符??简化代码：

{!students.loading && (
  students.data?.map((caseStudy) => (
    <a key={caseStudy.id}>{caseStudy.title}</a>
  )) ?? <p>暂无学生数据</p>
)}
{students.loading && <p>加载中...</p>}

额外建议：避免直接操作DOM #

你代码中用了$("#mostviews").hide();，在React中更推荐用状态控制元素显示，比如：

const [showMostViews, setShowMostViews] = useState(true);

const handleClick2 = async() => {
  setShowMostViews(false); // 用状态控制隐藏，替代jQuery直接操作DOM
  const response = await axios.get(`https://xxxxxxxxxxxxxx.com/${spath}`);
  setStudents({
    data: response.data,
    loading: false
  });
}

// 渲染时用条件判断控制元素显示
{showMostViews && <div id="mostviews">...</div>}

内容的提问来源于stack exchange，提问作者prabhat mohal