React中如何解决"Cannot destructure property 'Title' of 'fac' as it is undefined"报错

报错原因 #

• currentId状态初始化时没有赋值，初始值为undefined，页面首次渲染就会调用showSelectedFact方法
• 此时用filter匹配Id等于undefined的项，返回的是空数组，取索引0的值就是undefined，对undefined进行解构操作就会触发该报错

修复方案 #

你可以任选以下一种方式修复：

方案1：给状态设置初始值 #

直接给currentId设置默认选中的ID，首次渲染就能匹配到对应数据：
把代码里的
const [currentId, setCurrentId] = useState();
修改为
const [currentId, setCurrentId] = useState("1");

方案2：增加非空判断 #

在showSelectedFact方法里先判断匹配到的内容是否存在，不存在时不渲染或者展示提示文案，同时可以做个小优化，查找单个元素用find比filter更高效，匹配到就终止遍历：

const showSelectedFact = () => {
  const fac = facsInfo.find((x) => x.Id === currentId);
  if (!fac) return null; // 也可以返回 <p>请选择要查看的设施</p> 做引导
  const { Title, Description, Id } = fac;
  return (
    <div key={Id}>
      <h1>{Title}</h1>
      <h5>{Description}</h5>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Kim San