javascript - 无法在 React 中访问对象的属性
问题描述
我试图制作一个 onClick 事件并显示信息。
当我执行console.log 来显示filteredSreen[0] 时,我得到了一个object( {id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D"}
)。
当我想访问 id 或 screen 时,我做了console.log(filteredSreen[0].id)
或console.log(filteredSreen[0].screen)
在 line6。
他们都犯了同样的错误Cannot read property 'id' of undefined
或 Cannot read property 'screen' of undefined
我应该怎么做才能访问财产?
================================================
screeninfo 是数组。
[{id: "1", screen: "2", layer: "5", time: "13:15", dimension: "2D"},{id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D"},{id: "3", screen: "2", layer: "5", time: "13:15", dimension: "2D"}]
它保存在 reduex 存储中,我将它传递给 BookInfo 组件。我发现 screeninfo 是使用 console.log 正确传递的。
我还使用console.log检查了{id:“2”,屏幕:“2”,层:“5”,时间:“13:15”,维度:“2D”,}的结果。但我无法访问财产。
我暂时这样做,我得到了正确的东西。
// temporary way
const filterScreen = () => {
let filteredSreen = screeninfo.filter((item) => item.id === screenId);
let result = filteredSreen[0];
let screen = "";
let layer = "";
for (let key in result) {
if (key === "screen") {
screen = result[key];
}
if ((key = "layer")) {
layer = result[key];
}
}
return screen,layer;
}
const BookInfo = ({ movie, theater, screenId, date, screeninfo }) => {
const filterScreen = () => {
let filteredSreen = screeninfo.filter((item) => item.id === screenId);
let result = filteredSreen[0];
console.log(result); // {id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D",} <=line5
console.log(result.id) // error
};
return (
<div className="bookInfo">
<div>{movie}</div>
<div>{theater}</div>
<div>{filterScreen()}</div>
</div>
);
};
解决方案
请添加条件
const filterScreen = () => {
let filteredSreen = screeninfo.filter((item) => item.id === screenId);
let result = filteredSreen[0];
if (result && result.id) { // condition
console.log(result);
console.log(result.id);
}
};
推荐阅读
- c - 为什么信号量不阻塞第二个线程?(C)
- objective-c - NSTaggedPointerString stringByReplacingCharactersInRange:withString:]: iOS13 中的 nil 参数
- sql - 为制药行业的药品生成唯一的序列号
- node.js - 无法执行“npm install --save firebase”
- java - 无法将大型 csv 文件存储到哈希图中
- javascript - 对象的属性在放入本地存储时不会修改元素的值
- ios - 如何为我的视图解决自动布局约束
- mongodb - 在 mongodb 中按 ObjectId 的时间戳部分对文档进行分组
- awk - 从 1 awk 中减去文件的值
- android - 我该如何解决 - 无法解析符号执行