React: Uncaught TypeError: Cannot read property 'localeCompare' of undefined

Question

我正在构建一个应用程序，其中有一个 Home 页面，我在该页面上以卡片形式呈现从 API 获取的数据，以及 Favorites页面，其中显示标记为收藏的卡片。我正在使用 React Router，我有一个 Topbar 组件和一个 Nav 和一个 Search，后者使用 grouped materialui autocomplete component.

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

Answer 1

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

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

    };
  });

React: Uncaught TypeError: Cannot read property 'localeCompare' of undefined

React: Uncaught TypeError: Cannot read property 'localeCompare' of undefined

reactjs

autocomplete

react-router

material-ui

react-router-dom