无法访问 React 中对象的属性答案

【问题标题】：Can't access to property of object in React无法访问 React 中对象的属性
【发布时间】：2020-04-07 09:56:42
【问题描述】：

我尝试制作一个 onClick 事件并显示信息。

当我执行 console.log 以显示 filtersSreen[0] 时，我得到了一个对象 ({id: "2", screen: "2", layer: "5", time: "13:15", dimension: "2D"})。

当我想访问 id 或 screen 时，我在第 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”，屏幕：“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>
  );
};

【问题讨论】：

你能 console.log(typeof result) 告诉我它是什么类型吗？
你相信结果不是总是未定义的吗？

标签： javascript reactjs

【解决方案1】：

请添加条件

  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);
    }
  };

【讨论】：

【解决方案2】：

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>
  );
};

实际上，您的过滤条件并非每次都包含在 if 条件中

【讨论】：