Mantine Autocomplete报错：已设value仍提示每个选项需有value属性

查阅Mantine官方文档及示例后，仍搞不懂：明明给每个选项都设了value属性，却还是收到「Each Option must have a value property」的报错。另外，把companies && companies.map((company: Company) =>这段逻辑删掉后，value就能正常显示，完全搞不懂加了这段为啥会出问题，相关代码如下：

<AppShell.Main>
  <Container size="md">
    <Autocomplete
      placeholder="Pick value or enter anything"
      data={
        companies &&
        companies.map((company: Company) => [
          {
            value: "Rick",
            group: "Used to be a pickle",
            items: ["a", "b"],
          },
          {
            value: "Morty",
            group: "Never was a pickle",
            items: ["v", "c"],
          },
          {
            value: "Beth",
            group: "Never was a pickle",
            items: ["d", "de"],
          },
          {
            value: "Summer",
            group: "Never was a pickle",
            items: ["af", "bf"],
          },
        ])
      }
    />
  </Container>
</AppShell.Main>

问题原因与解决办法 #

核心问题 #

你用companies.map的方式错了：遍历companies数组时，每遍历一个元素就返回一整套完整的选项数组，最终data会变成「数组套数组」的结构（比如companies有3个元素，data就会是[[选项1,选项2,...], [选项1,选项2,...], [选项1,选项2,...]]）。Mantine的Autocomplete不识别这种嵌套结构，它会把外层数组的每一项（也就是内部的那个数组）当成单个选项，而数组没有value属性，自然就报错了。

两种修正方案 #

方案1：如果要基于每个company生成对应选项

如果你本来想根据companies里的每个对象生成不同的选项组，应该在map里返回单个选项对象，而不是整个数组：

<AppShell.Main>
  <Container size="md">
    <Autocomplete
      placeholder="Pick value or enter anything"
      data={
        companies?.map((company: Company) => ({
          value: company.name, // 替换成company的实际属性
          group: company.group, // 替换成company的实际属性
          items: company.itemsList // 替换成company的实际属性
        })) || []
      }
    />
  </Container>
</AppShell.Main>

方案2：如果只是想在companies存在时显示固定选项

如果你的需求只是“当companies存在时，显示那组固定的Rick、Morty等选项”，那完全不需要用map，直接用条件判断即可：

<AppShell.Main>
  <Container size="md">
    <Autocomplete
      placeholder="Pick value or enter anything"
      data={companies ? [
        {
          value: "Rick",
          group: "Used to be a pickle",
          items: ["a", "b"],
        },
        {
          value: "Morty",
          group: "Never was a pickle",
          items: ["v", "c"],
        },
        {
          value: "Beth",
          group: "Never was a pickle",
          items: ["d", "de"],
        },
        {
          value: "Summer",
          group: "Never was a pickle",
          items: ["af", "bf"],
        },
      ] : []}
    />
  </Container>
</AppShell.Main>

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