[英]React - "TypeError: Cannot read property 'image' of undefined" while styling with CSS
I am new to web development and React, and I would kindly ask for some help related to my current project.我是 web 开发和 React 的新手,我会请求一些与我当前项目相关的帮助。
I am accessing data from a local file and trying to display them on click.我正在从本地文件访问数据并尝试在单击时显示它们。 It works fine if I don't touch anything related to styling, but every time I add some CSS my code breaks.
如果我不触及与样式相关的任何内容,它工作正常,但每次我添加一些 CSS 我的代码都会中断。
I guess ny question is similar to the one asked here , but this solution doesn't work for me.我想任何问题都类似于这里提出的问题,但这个解决方案对我不起作用。 I am not even able to add a div tag?
我什至无法添加 div 标签? Can anybody suggest what to do?
有人可以建议该怎么做吗? Thanks!
谢谢!
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);
Array.prototype.find can potentially return undefined if no element in the array matches.如果数组中没有匹配的元素, Array.prototype.find可能会返回 undefined。
The
find()
method returns the value of the first element in the provided array that satisfies the provided testing function.find()
方法返回提供的数组中满足提供的测试 function 的第一个元素的值。 If no values satisfy the testing function,undefined
is returned.如果没有值满足测试 function,则返回
undefined
。
If foundCard()
returns undefined then foundCard().image
will throw the TypeError: Cannot read property 'image' of undefined”
error you are seeing.如果
foundCard()
返回 undefined 则foundCard().image
将抛出您看到的TypeError: Cannot read property 'image' of undefined”
错误。
Simplify foundCard
from function to an assignment expression. foundCard
从 function 简化为赋值表达式。 Check the foundCard
value and if falsey (undefined, null, false) then return null
early to indicate there is nothing to render.检查
foundCard
值,如果为假(未定义,null,假),则提前返回null
以指示没有要渲染的内容。
The React Fragment
s are also only necessary when returning more than a single node and you don't want to muddy up the DOM with div
"containers". React
Fragment
也仅在返回多个节点并且您不想用div
“容器”混淆 DOM 时才需要。 They don't need to surround each single element.他们不需要包围每个元素。
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.