React: ReviewDetails.js:29 Uncaught TypeError: Cannot read properties of null (reading 'url')

Question

我试图从我的 Strapi 后端显示每个 ID 的图像，但是当我运行它在我的前端 (ReactJS) 中时，它在我的控制台中显示此错误：

这是我的代码：

import React from "react";
import { useParams } from "react-router-dom";
import useFetch from "../hooks/useFetch";

export default function ReviewDetails() {
  const { id } = useParams();
  const { loading, error, data } = useFetch('http://localhost:1337/api/reviews/' + id + '/?populate=*')
  const image = useFetch(`http://localhost:1337/api/upload/files/` + id);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  console.log(image);
  console.log(data);

  return (
    <div className="review-card">
      <div className="rating">{data.data.attributes.rating}</div>
      <h2>{data.data.attributes.title}</h2>

      <small>console list</small>

      <p>{data.data.attributes.body}</p>

      <img
        width="500px"
        src={`http://localhost:1337` + image.data.url}
        alt="Not Working!"
      />
    </div>
  );
}

顺便说一句，有时它会在我编辑代码时加载，但当我刷新它时，它不再加载图像。

Answer 1

fetch API 是异步的，因此我假设您的 useFetch 挂钩异步设置 return 值。因此必须在第一次加载时获取图像，并且在 API 有 returned 响应之前，returned 值将为空。换句话说，image.data 将为空，导致错误 Cannot read properties of null (reading 'url')。这也解释了为什么图像在编辑代码后加载而不是在第一次刷新时加载。

要解决此错误，您可以使用可选链接：

<img
  width="500px"
  src={`http://localhost:1337${image.data?.url}`}
  alt="Not Working!"
/>

在从 API 获取数据之前，图像仍然无法正确加载，但这可以防止出现任何错误。如果您有占位符 URL 可以在图像数据仍在加载时使用，您可以像这样使用它：

<img
  width="500px"
  src={image.data?.url ? `http://localhost:1337${image.data?.url}` : placeholderURL}
  alt="Not Working!"
/>

React: ReviewDetails.js:29 Uncaught TypeError: Cannot read properties of null (reading 'url')

React: ReviewDetails.js:29 Uncaught TypeError: Cannot read properties of null (reading 'url')

reactjs

strapi