代码之家 › 专栏 › 技术社区 › Tyler Slee

React-有些数据呈现正确,但有些返回“Uncaught TypeError:无法读取未定义的属性(正在读取…)”

react-router react-hooks object reactjs javascript

Tyler Slee · 技术社区 · 1 年前

我在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:Cannot read properties of undefined(reading…)”,从而导致空白页。 Error image:

此外,以下是问题页面的链接:

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

路线如下:

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

我尝试console.log每个对象,每个对象都正确显示值(即没有未定义的值)

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

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

3 回复 | 直到 1 年前

Fernando SA 1 年前

如果你得到了所有这些 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);

Gabriel Torres Takahashi 1 年前

该错误意味着 product 变量的值未定义。

当 find() 运算符与行上数组中的任何记录都不匹配 const product = feedData.find((product) => product.title === title);

你应该把 optional chaining (?.) 运算符,如果您不希望它抛出错误,或者您应该在DOM上呈现它的值之前验证它是否未定义。

ghazaleh eslamifard 1 年前

数组中的find()方法返回与指定条件匹配的第一个元素。如果未找到匹配项,则返回undefined。试图访问未定义的任何属性将导致TypeError,“无法读取未定义的属性”

Maulik Sakhida 1 年前

或者,您可以使用Try-Catch块进行错误处理,因为在您的情况下,产品标题是未定义的。 find方法返回未定义

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

    if (product) {
      console.log("Found product:", product);
    } else {
      console.log("Product not found");
    }