时间戳

首页 > 解决方案 > 反应：未捕获的类型错误：无法读取未定义的属性“localeCompare”

reactjs - 反应：未捕获的类型错误：无法读取未定义的属性“localeCompare”

问题描述

我正在构建一个应用程序，其中有一个Home页面，我在其中呈现从 API 以卡片形式获取的数据，以及一个Favorites页面，其中显示标记为收藏的卡片。我正在使用 React Router，并且我有一个Topbar带有 aNav和 a的组件Search，后者正在使用分组 materialui 自动完成组件。

在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...' />
        )}

标签： reactjsautocompletereact-routermaterial-uireact-router-dom

解决方案

map 返回一个新数组，这样您应该将其返回值分配给某个变量。你也应该总是先传播你的对象，否则它可能会覆盖你正在执行的更改：

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

    };
  });

推荐阅读