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

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

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

    };
  });

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

1 个答案: