如何保留 Select 和 MenuItem 中已经选择的值？

Question

我是 ReactJS 的初学者，我对 Selects 有疑问。我有一个 Select 可以用 MenuItem.

渲染一些植物和蜜蜂

我需要的是 Select 已经带有在 bees 和 plants 列表中标记的一些值。

如果用户点击新建属性选择是空白的，但用户点击任何属性进行编辑，则选择必须标记为选中。

我希望我能正确解释它。这是我输入 CodeSandBox

的代码

这是我的蜜蜂数据库的模拟：

{
  "data": [
    {
      "id": "1",
      "type": "bee-databases",
      "attributes": {
        "species-name": "Africanizada (Apis mellifera)"
      }
    },
    {
      "id": "2",
      "type": "bee-databases",
      "attributes": {
        "species-name": "Abelha-cachorro, Arapuá, Irapuá (Trigona spinipes)"
      }
    },
    {
      "id": "3",
      "type": "bee-databases",
      "attributes": {
        "species-name": "Andorinha, Benjoi (Scaptotrigona polysticta)"
      }
    }
  ]
}

这是我的植物数据库的模拟：

{
  "data": [
    {
      "id": "1",
      "type": "plant-databases",
      "attributes": {
        "species-name": "Cana-de-açucar"
      }
    },
    {
      "id": "2",
      "type": "plant-databases",
      "attributes": {
        "species-name": "Citros"
      }
    },
    {
      "id": "3",
      "type": "plant-databases",
      "attributes": {
        "species-name": "Eucalipto"
      }
    }
  ]
}

这是我的属性数据库的模拟：

  {
    "id": "45",
    "type": "properties",
    "attributes": {
      "farmer-name": "João Galli",
      "name": "Nova Propriedade",
      "address": "Rua teste",
      "total-planted-area": "100",
      "total-forest-area": "40",
      "apiaries-in-use": 20,
      "plants": [
        [
          {
            "id": 46,
            "kind": "Cana-de-açucar"
          }
        ]
      ],
      "accepted-bees": [
        [
          {
            "id": 46,
            "kind": "Africanizada (Apis mellifera)"
          }
        ]
      ]
    }
  }

Answer 1

如果我理解正确，问题是 select 有 [Object object] 而不是实际标签。

如果是这样，问题是下拉列表需要为 value 属性获取一个字符串数组。意味着 beeSelect 应该是一个字符串数组，但它实际上是一个（数组）蜜蜂的数组

例如

"accepted-bees": [
  [
    {
      "id": 46,
      "kind": "Africanizada (Apis mellifera)"
    }
  ]
]

所以，.map 看起来应该有点不同

const _selectedBees = item.attributes["accepted-bees"].map((bee) => bee[0].kind);

（植物也一样）

https://codesandbox.io/s/edit-modal-working-forked-of675?file=/src/features/components/dialog-property/DialogProperty.jsx:1580-1673

备注：

为什么 accepted-bees 是一个数组数组，如果它只有一个项目（子数组）
.map((bee) => bee) 没有意义。它 returns 它得到的值相同。

如何保留 Select 和 MenuItem 中已经选择的值？

How to leave the values already selected inside the Select and MenuItem?

javascript

reactjs

react-material