React控制台能获取数据但页面不渲染问题求助

你的问题出在EmployeesAxios组件的map回调函数里——没有返回要渲染的JSX元素。当你用大括号{}包裹箭头函数的内容时，必须显式使用return语句返回组件；如果省略return，可以把大括号换成小括号()，让箭头函数隐式返回内容。

修复后的EmployeesAxios组件代码 #

方式一：显式添加return #

export function EmployeesAxios(props) {
  return (
    <div>
      <h1>Employees</h1>
      {props.employee.map((employee) => {
        // 添加return返回JSX
        return (
          <div key={employee.id}>
            <h3>Name: {` ${employee.first_name} ${employee.last_name}`}</h3>
          </div>
        );
      })}
    </div>
  );
}

方式二：用小括号实现隐式返回 #

export function EmployeesAxios(props) {
  return (
    <div>
      <h1>Employees</h1>
      {/* 把大括号换成小括号，箭头函数自动返回内部JSX */}
      {props.employee.map((employee) => (
        <div key={employee.id}>
          <h3>Name: {` ${employee.first_name} ${employee.last_name}`}</h3>
        </div>
      ))}
    </div>
  );
}

额外优化建议 #

父组件中传递props时，变量名可以更语义化，比如把employee={employees}改成employees={employees}，这样子组件里用props.employees.map会更易读，避免混淆单数和复数。

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