页面首次加载时传递的props渲染为undefined问题排查

问题原因 #

• 初始数据未加载完成：App组件中artists初始值为空数组，当EachArtistCard组件挂载时（无论是从列表跳转还是直接访问路由），fetch('/artists')可能还未完成，此时artists仍是空数组，artists.find()自然返回undefined。
• 组件渲染时机问题：thisArtist在组件顶层直接声明，组件首次渲染时就会执行find操作，此时数据尚未就绪，导致后续访问thisArtist.name等属性报错。

解决方向 #

1. 添加全局加载状态，控制渲染时机 #

在App组件中新增加载状态，确保数据加载完成后再渲染依赖数据的组件：

function App() {
  const [artists, setArtists] = useState([]);
  const [loading, setLoading] = useState(true); // 新增加载状态

  useEffect(() => {
    fetch('/artists')
      .then((r) => r.json())
      .then((info) => {
        setArtists(info);
        setLoading(false); // 数据加载完成后关闭加载状态
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, []);

  // 加载中时显示提示
  if (loading) {
    return <div className="text-center py-10">Loading...</div>;
  }

  return (
    // 原有的JSX内容
  );
}

2. 在EachArtistCard内添加数据守卫 #

在组件内单独判断thisArtist是否存在，避免因数据未就绪或找不到数据导致的报错：

function EachArtistCard({ posts, setPosts, artists }) {
  let { id } = useParams();
  const thisArtist = artists.find(
    (artist) => parseInt(id) === parseInt(artist.id)
  );

  // 找不到艺术家时返回提示
  if (!thisArtist) {
    return <div className="text-center py-10">Artist not found or loading...</div>;
  }

  // 原有的useEffect和渲染逻辑
}

3. 单独请求单个艺术家数据（可选优化） #

不再依赖全局artists数组，在EachArtistCard中根据id单独请求该艺术家的详细数据，避免全局数据未加载或不一致的问题：

function EachArtistCard({ posts, setPosts }) {
  let { id } = useParams();
  const [thisArtist, setThisArtist] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/artists/${id}`)
      .then(r => r.json())
      .then(data => {
        setThisArtist(data);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, [id]);

  if (loading) return <div className="text-center py-10">Loading...</div>;
  if (!thisArtist) return <div className="text-center py-10">Artist not found</div>;

  // 后续渲染逻辑
}

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