如何在ReactJS中渲染JSON API数据？报allUsers未定义错误

报错核心原因 #

你写的Dashboard组件存在关键结构错误：

• React函数组件必须通过return语句返回要渲染的JSX内容，你当前完全遗漏了return语句，把本该作为返回值的allUsers.map渲染逻辑直接裸写在函数体中。
• 脱离了JSX编译上下文的裸代码块会被JS引擎当作普通逻辑解析，最终导致变量上下文识别错误，抛出Uncaught ReferenceError: allUsers is not defined的运行时报错，同时组件因为没有返回可渲染内容，本身也不符合React的运行要求。

修正后的可运行代码 #

const Dashboard = ({status, juser}) => {
  const [allUsers, setAllUsers] = React.useState([]);
  const id = juser.actable_id;
  console.log(id); // 此处可正常获取到id，值为1

  const getAllusers = () => {
    axios
      .get(`http://localhost:3001/user/${id}`, { withCredentials: true })
      .then((response) => {
        console.log(response.data);
        setAllUsers(response.data);
      })
      .catch((error) => {
        console.log(" error", error);
      });
  };

  React.useEffect(() => {
    getAllusers();
  }, [id]); // 将effect中依赖的id加入数组，避免id变化时请求不更新的闭包问题

  // 显式返回渲染的JSX内容
  return (
    <div>
      {allUsers.map((job_seeker) => {
        return (
          // 列表元素绑定唯一key，避免React的diff警告
          <div key={job_seeker.id}>
            <p>{job_seeker.name}</p>
          </div>
        );
      })}
    </div>
  );
}

export default Dashboard;

新手需要注意的细节 #

• 写JSX返回内容时，如果片段较长，一定要用括号把整个返回结构包裹在return后面，避免JS自动分号插入导致的语法问题。
• useEffect中用到的外部变量，必须全部加入第二个参数的依赖数组，否则会出现取到旧值的闭包问题。
• map渲染列表时，给每个列表项绑定稳定唯一的key属性，不要直接用数组index当key，否则数据顺序变动时会出现渲染错乱。

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