从后端获取的Workouts数据在控制台显示但无法渲染到网页

你的代码里控制台能正常输出workouts数据，但页面无法渲染，核心问题是map回调函数没有返回JSX元素：

你在map中使用了带大括号{}的箭头函数，这种写法需要显式使用return返回元素；如果用隐式返回，要去掉大括号或者用小括号包裹JSX。

修复方案一：使用隐式返回（推荐） #

把箭头函数的大括号换成小括号，直接返回JSX：

return (
  <div className="home">
    <div className="workouts">
      {workouts.map((workout) => (
        <p key={workout._id}>{workout.title}</p>
      ))}
    </div>
  </div>
);

修复方案二：添加显式return #

保留大括号，手动添加return语句：

return (
  <div className="home">
    <div className="workouts">
      {workouts.map((workout) => {
        return <p key={workout._id}>{workout.title}</p>;
      })}
    </div>
  </div>
);

额外优化 #

因为你初始化workouts为空数组[]，空数组调用map不会报错，所以可以省略workouts &&这个判断，代码会更简洁。

完整修正后的代码 #

import React, { useEffect, useState } from "react";

const Home = () => {
  const [workouts, setWorkouts] = useState([]);

  useEffect(() => {
    const fetchWorkouts = async () => {
      const response = await fetch("http://localhost:4000/api/workouts");
      const json = await response.json();

      if (response.ok) {
        console.log('success');
        console.log(json);
        setWorkouts(json);
      }
    };

    fetchWorkouts();
  }, []);

  return (
    <div className="home">
      <div className="workouts">
        {workouts.map((workout) => (
          <p key={workout._id}>{workout.title}</p>
        ))}
      </div>
    </div>
  );
};

export default Home;

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