Reactjs 反应：未捕获类型错误：无法读取属性'；本地比较'；未定义的

我正在构建一个应用程序，其中有一个

主页

页面，其中我以卡片的形式呈现从API获取的数据，还有一个

收藏夹

页面，其中显示标记为收藏夹的卡片。我使用的是React路由器，我有一个

顶栏

组件，带有

导航

和

搜索

，后者利用了

在

Search

组件中，我试图检查用户是否在主页或收藏夹页面中，以便使用2个不同的数组。主页的原始数据数组，以及收藏夹页面中有偏好项的数据数组，我得到了上面的错误。我将这两个数组作为道具传递，搜索组件最初使用原始的

beers

数组。我不确定我做错了什么，错误消息不能帮助我识别问题

这是我为区分不同页面而编写的逻辑：

let options;
  document.location.pathname === '/favorites'
    ? (options = favoriteBeers)
    : (options = beers);

这是自动完成组件的代码：

 options.map(option => {
    const firstLetter = option.name[0].toUpperCase();
    return {
      firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
      ...option,
    };
  });

<Autocomplete
        options={options.sort(
          (a, b) => -b.firstLetter.localeCompare(a.firstLetter)
        )}
        groupBy={option => option.firstLetter}
        getOptionLabel={option => option.name}
        getOptionSelected={(option, value) => option.id === value.id}
        clearOnEscape
        style={{ width: 400, margin: 'auto' }}
        onChange={(e, value) => handleOpen(value)}
        renderInput={params => (
          <TextField {...params} placeholder='Search for beer...' />
        )}

options.map（选项=>{
常量firstLetter=option.name[0].toUpperCase（）；
返回{
第一个字母：/[0-9]/.测试（第一个字母）-“0-9”：第一个字母，
选项
};
});
-b、 firstLetter.localeCompare（a.firstLetter）
)}
groupBy={option=>option.firstLetter}
getOptionLabel={option=>option.name}
getOptionSelected={（选项，值）=>option.id==value.id}
clearOnEscape
样式={{width:400，边距：'auto'}}
onChange={（e，value）=>handleOpen（value）}
renderInput={params=>(
)}

映射返回一个新数组，这样您应该将其返回值分配给某个变量。此外，应始终首先展开对象，否则可能会覆盖正在执行的更改：

options = options.map(option => {
    const firstLetter = option.name[0].toUpperCase();
    return {
      ...option,
      firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,

    };
  });

---

啊，是的，真的，谢谢你，欢迎你：）