我试图制作一个onClick事件并显示信息。
当我执行console.log以显示filteredSreen [0]时,我得到了一个对象({id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D"}
)。
当我想要访问ID或屏幕时,我在第6行做了console.log(filteredSreen[0].id)
或console.log(filteredSreen[0].screen)
。
他们都犯同样的错误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”,screen:“ 2”,layer:“ 5”,time:“ 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>
);
};
答案 0 :(得分:0)
请添加条件
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);
}
};
答案 1 :(得分:0)
const BookInfo = ({ movie, theater, screenId, date, screeninfo }) => {
const filterScreen = () => {
let filteredSreen = screeninfo.filter((item) => item.id === screenId);
let result = filteredSreen.length!==0 ? filteredSreen[0] :void 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>
);
};
实际上,每次过滤条件时,您过滤的条件都不正确