Ant Design выбирает внутри массива цикла формы?

У меня есть набор таких свойств продукта

[
  {
    name: 'Color',
    options: ['Blue', 'Green', 'White'],
  },
  {
    name: 'Size',
    options: ['X', 'L', 'XL'],
  }
]

И я пытаюсь показать это в таком виде

<Form.List name="properties">
  {properties =>
    properties.map(property => {
      // options: Array(3)
      //   0: "Blue"
      //   1: "Green"
      //   2: "White"
      // _id: "5e71f09d6fa4bb28ee5a87e4"
      // name: "Color"

      return (
        <Form.Item {...property.options}>
          <Select name={property.name}>
            <Option />
          </Select>
        </Form.Item>
      );
    })
  }
</Form.List>

Но я получаю пустой Select без каких-либо значений :( Кто-нибудь может мне с этим помочь?


reactjs javascript antd
person netseac    schedule 27.03.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы создаете функцию с {properties => ...}, которая никогда не вызывается. Так что просто визуализируйте properties.map(...) как детей напрямую, например:

<Form.List name="properties">
  {
    properties.map(property => {
      return (
        <Form.Item {...property.options}>
          <Select name={property.name}>
            <Option />
          </Select>
        </Form.Item>
      );
    }
  }
</Form.List>
person Tracer69    schedule 27.03.2020
comment
Я так не думаю - person netseac; 27.03.2020

arrow_upward
0
arrow_downward

Вам нужно сопоставить options в Select:

options.map((option) => <Select.Option key={option} value={option}>{option}</Select.Option>);

<Form.List name="properties">
  {properties.map(({ options, name, id }) => {
      // options: Array(3)
      //   0: "Blue"
      //   1: "Green"
      //   2: "White"
      // _id: "5e71f09d6fa4bb28ee5a87e4"
      // name: "Color"

      return (
        <Form.Item key={id} name={name}>
          <Select>
            {options.map((option) => (
              <Select.Option key={option} value={option}>{option}</Select.Option>
            ))}
          </Select>
        </Form.Item>
      );
    })
  }
</Form.List>
person Dennis Vash    schedule 27.03.2020
comment
Не работает. Я получаю сообщение об ошибке TypeError: Cannot read property 'map' of undefined. Параметры не определены. - person netseac; 27.03.2020
comment
Не могу угадать без производимого примера, и вы не должны отображать Options, здесь нет такой сущности - person Dennis Vash; 27.03.2020
comment
Конечно. Подскажите, пожалуйста, где я могу привести пример? Я имею в виду, какой сервис мне нужно для этого использовать? - person netseac; 27.03.2020
comment
OK. Спасибо. Я постараюсь. - person netseac; 27.03.2020