React - 一些数据渲染正确，但有些返回“未捕获的类型错误：无法读取未定义的属性（正在读取...）”

Question

我正在 React 中制作一本在线杂志（类似于 Vogue、Elle 等）。我有一个 JS 文件（充当数据的 API），其中包含对象数组。每个对象代表特定问题（或故事，如果可以的话）的数据。

export const feedData = [
  {
    key: 1,
    category: "Trending",
    title: "Why Tyler ICU Is Being Accused Of Plagiarism",
    image:
      "https://netstorage-briefly.akamaized.net/images/3dff571b0ed0cdb9.jpg?imwidth=900",
    issueTextP1:
      "Lorem ipsum, dolor sit...",
    issueTextP2:
      "Lorem ipsum dolor sit...",
    author: "John Smith",
    date: "01 September 2023",
  },
  {
    key: 2,
    category: "Watch",
    title: "Shekhinah Releases 'Tides' Music Video",
    image:
      "https://i1.sndcdn.com/artworks-0X5mYBEnDbWDOVap-U2RQjA-t500x500.jpg",
    issueTextP1:
      "Lorem ipsum, dolor sit...",
    issueTextP2:
      "Lorem ipsum dolor sit...",
    author: "John Smith",
    date: "01 September 2023",
  }}
  {
    key: 3,
    category: "Opinion",
    title: "Why Is Everyone Suddenly Obsessed With Suits? I Tried to Find Out",
    image:
      "...",
    issueTextP1:
      "Lorem ipsum, dolor sit...",
    issueTextP2:
      "Lorem ipsum dolor sit...",
    author: "John Smith,
    date: "01 September 2023",
  },

如您所见，所有这些对象都是相同的。每个对象都代表一个问题，因此我尝试在屏幕上显示对象的内容（使用 useParams 在其自己的页面中）。

import React from "react";
import { useParams } from "react-router-dom";
import { feedData } from "./FeedData";

export default function SingleIssue() {
  window.scrollTo(0, 0);

  const { title } = useParams();
  const product = feedData.find((product) => product.title === title);

  return (
    <div className="single-issue">
      <div className="issue-hero">
        <div id="issue-heading">
          {title} <br />
          <span>
            By {product.author} <br />
            {product.date}
          </span>
        </div>
        <div id="issue-image">
          <img src={product.image} />
        </div>
      </div>
      <div className="issue-text-ads">
        <div className="issue-text">
          {product.issueTextP1} <br />
          <br /> {product.issueTextP2} <br />
        </div>
      </div>
    </div>
  );
}

对于某些问题（或对象），它可以很好地渲染所有内容（即正确显示所有内容），但对于某些问题，它会为所有值返回“Uncaught TypeError：无法读取未定义的属性（正在读取...）”（作者） 、日期、图像等），这会导致空白页。

此外，这里是问题页面的链接：

<Link to={`/issue/${props.title}`} className="link">

这是路线：

<Route path="/issue/:title" element={<SingleIssue />} />

我尝试控制台记录每个对象，并且每个对象都正确显示值（即没有未定义的值）

const logMap = feedData.map((item) => console.log(item));

再一次，所有这些对象都是相同的，但有些对象没有渲染，那么我做错了什么？我是 React 新手，请帮忙。

Answer 1

该错误表示

product

变量的值未定义。

当

find()

运算符与行

const product = feedData.find((product) => product.title === title);

上数组中的任何记录都不匹配时，可能会发生这种情况

如果您不希望它抛出错误，您应该放置 可选链接 (?.) 运算符，或者您应该在 DOM 上渲染它的值之前验证它是否未定义。

Answer 2

如果你得到所有这些

TypeError

，那是因为执行以下行时没有找到产品：

const product = feedData.find((product) => product.title === title);

我怀疑原因是您试图将产品的标题与 URL 中的字符串进行匹配，该字符串可能已经发生了一些转换。我建议在上面的行上方添加

console.log(title)

并验证您正在搜索的字符串与产品标题完全匹配。我的猜测是，当标题包含特殊字符（例如

'

或

?

）时，您会看到略有不同的字符串，因为您在构建 URL 时甚至没有对字符串进行 URL 编码。

一个可能的解决方案是对标题进行一些转换，使其对 URL 更加友好。当然，您必须对

feedData.find

应用相同的转换。

所以：

<Link to={`/issue/${transformTitle(props.title)}`} className="link">

和

const product = feedData.find((product) => transformTitle(product.title) === title);