React - 使用 CSS 进行样式设置时，“TypeError：无法读取未定义的属性‘图像’”

Question

我是 web 开发和 React 的新手，我会请求一些与我当前项目相关的帮助。

我正在从本地文件访问数据并尝试在单击时显示它们。 如果我不触及与样式相关的任何内容，它工作正常，但每次我添加一些 CSS 我的代码都会中断。

我想任何问题都类似于这里提出的问题，但这个解决方案对我不起作用。 我什至无法添加 div 标签？ 有人可以建议该怎么做吗？ 谢谢！

import { withRouter } from "react-router-dom";
import "../womenInfo.css";

function WomanDetails({ routeProps, data }) {
 const foundCard = () => {
    return data.find((card) => card.id === +routeProps.match.params.id);
};
return (
    <div className="woman-page">
        <>
            <img className="info-img" src={foundCard().image} alt="" />
        </>
        <>
            <h3 className="women-title">{foundCard().title}</h3>
        </>
        <>
            <p className="women-years">{foundCard().years}</p>
        </>
        <>
            <p className="women-nationality">{foundCard().nationality}</p>
        </>
        <>
            <p className="women-contribution">{foundCard().contribution}</p>
        </>
    </div>
 );
}

export default withRouter(WomanDetails);

Answer 1

问题

如果数组中没有匹配的元素， Array.prototype.find可能会返回 undefined。

find()方法返回提供的数组中满足提供的测试 function 的第一个元素的值。 如果没有值满足测试 function，则返回undefined 。

如果foundCard()返回 undefined 则foundCard().image将抛出您看到的TypeError: Cannot read property 'image' of undefined”错误。

解决方案

foundCard从 function 简化为赋值表达式。 检查foundCard值，如果为假（未定义，null，假），则提前返回null以指示没有要渲染的内容。

React Fragment也仅在返回多个节点并且您不想用div “容器”混淆 DOM 时才需要。 他们不需要包围每个元素。

function WomanDetails({ routeProps, data }) {
  const foundCard = data.find((card) => card.id === +routeProps.match.params.id);

  if (!foundCard) return null;

  return (
    <div className="woman-page">
      <img className="info-img" src={foundCard.image} alt="" />
      <h3 className="women-title">{foundCard.title}</h3>
      <p className="women-years">{foundCard.years}</p>
      <p className="women-nationality">{foundCard.nationality}</p>
      <p className="women-contribution">{foundCard.contribution}</p>
    </div>
  );
}

export default withRouter(WomanDetails);