Блог

Я новичок в ReactJS, и у меня проблема с выбором. У меня есть Select который отображает некоторые растения и пчел с MenuItem .

Что мне нужно, так это то, что Select уже поставляется с некоторыми значениями, отмеченными в списке bees и plants .

Если пользователь нажимает на новое свойство, выбранные значения остаются пустыми, но пользователь нажимает на любое свойство для редактирования, тогда выбранные значения должны быть отмечены галочкой.

Надеюсь, мне удалось правильно это объяснить. Вот мой код, который я поместил в CodeSandbox

Вот моделирование моей базы данных bee:

 {
  "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)"
          }
        ]
      ]
    }
  }
  

Если я правильно понимаю, проблема в том, что select имеет [Object object] вместо фактической метки.

Если это так, проблема в том, что выпадающий список ожидает получить массив строк для value реквизита. Означает, что beeSelect должно быть массивом string, но на самом деле это массив (array of) пчелиных

например

 "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

Примечания:

1. Почему accepted-bees массив массивов, если в любом случае он имеет только один элемент (дочерний массив)
2. Нет смысла делать .map((bee) => bee) . Он возвращает то же значение, что и получает.