Ant Design 在表單循環數組中選擇？

Question

我有一系列這樣的產品屬性

[
  {
    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 :( 有人可以幫我嗎？

Answer 1

您正在創建一個從未調用過的{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>

Answer 2

您需要映射Select的options ：

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>

Answer 3

const [value, setValue] = useState();
    
<Form.Item key={id} name={name}>
              <Select
                  onChange={value=>{setValue(option)}}
                  value={option}
                 >
                {options.map((option) => (
                  <Select.Option key={option} value={option}>{option}</Select.Option>
                ))}
              </Select>
            </Form.Item>