React通过Ajax请求展示用户列表遇问题：export default报错且列表不显示

Hey there! Let's work through the two issues you're facing with your React user list project in CodePen.

1. 为什么export default Users;会报错？ #

CodePen的React运行环境是基于全局作用域的，它不需要你手动导出组件——你只需要确保你的组件最终被渲染到页面的DOM元素里就行。当你添加export default Users;时，CodePen的编译器会因为不支持模块导出语法（或者说完全不需要）而抛出意外令牌错误，所以去掉这行是正确的操作，这部分你已经做对啦。

2. 为什么去掉后用户列表还是不显示？ #

看你的代码片段，主要有几个小问题导致数据无法正常渲染：

问题一：错误回调里的变量错误 #

你的GetUsers函数中，error回调里写了console.log(data);，但data是success回调里的专属参数，error回调里的参数是error，这会触发ReferenceError，可能直接中断后续逻辑，导致数据没法正常传递下去。

问题二：没有在React组件中管理状态 #

React组件需要通过状态（state）来跟踪数据变化，当数据获取到后，你必须更新组件的状态，这样组件才会感知到数据变化并重新渲染。你的代码里没有把获取到的用户数据绑定到组件状态上，所以即使拿到了数据，组件也不知道要渲染它。

修复后的完整代码示例 #

下面是调整后的代码，你可以直接在CodePen中使用：

function Users() {
  // 用useState定义状态，存储用户列表和错误信息
  const [users, setUsers] = React.useState([]);
  const [loadingError, setLoadingError] = React.useState(null);

  // 用useEffect在组件挂载时发起Ajax请求
  React.useEffect(() => {
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/users",
      success: function (data) {
        console.log("获取到用户数据：", data);
        // 更新用户列表状态
        setUsers(data);
      },
      error: function (error) {
        console.log("请求错误：", error);
        // 更新错误状态
        setLoadingError(error);
      }
    });
  }, []); // 空数组表示只在组件挂载时执行一次

  // 处理加载和错误状态
  if (loadingError) {
    return <div>加载用户失败：{loadingError.message}</div>;
  }
  if (users.length === 0) {
    return <div>正在加载用户...</div>;
  }

  // 渲染用户列表
  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

// 把组件渲染到页面的DOM元素中（CodePen里必须有这一行）
ReactDOM.render(<Users />, document.getElementById('root'));

额外检查点 #

• 确保CodePen的JavaScript设置里已经添加了React、ReactDOM和jQuery的CDN（在Settings > JavaScript > Add External Scripts/Pens里搜索添加）。
• 页面中要有一个id为root的div元素（在HTML面板里添加：<div id="root"></div>）。

这样调整后，你的用户列表应该就能正常显示啦！

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