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

如果我的理解正确，那么问题在于选择项包含[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)。它返回的值与之相同。

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

1 个答案: