reactjs - semantic-ui-react:Form.Select 中的大型数据集是否会使表单变慢？

Question

我正在使用 semantic-ui-react 创建以下表单(模态内部)。

  <Modal open={editBasicModal} size="small">
    <Modal.Header>Your basic details</Modal.Header>
    <Modal.Content scrolling>
      <Form loading={isSubmitting}>
        <Form.Group inline widths="equal">
          <Form.Input
            required
            label="First Name"
            fluid
            type="text"
            name="firstName"
            value={values.firstName}
            onChange={handleChange}
            error={errors.firstName !== undefined}
          />
          <Form.Input
            required
            label="Last Name"
            fluid
            type="text"
            name="lastName"
            value={values.lastName}
            onChange={handleChange}
            error={errors.lastName !== undefined}
          />
        </Form.Group>
        <Form.TextArea
          label="Bio"
          type="text"
          name="bio"
          value={values.bio}
          onChange={handleChange}
          rows={3}
          error={errors.bio !== undefined}
        />
        <Form.Select
            label="Country"
            name="location.country"
            placeholder="Country"
            value={values.location.country}
            onChange={(e, { value }) => {
              setFieldValue("location.country", value);
            }}
            options={this.state.allCountries}
          />
      </Form>
    </Modal.Content>
    <Modal.Actions open={true}>
      <Button type="submit" onClick={handleSubmit} >
        Update
      </Button>
    </Modal.Actions>
  </Modal>

以上代码来自一个使用 Formik + yup 的组件。
this.state.allCountries 是一个包含 200 多条记录的数组。现在这让我的表单变慢了，textarea 和 input 中的输入非常慢。

根据我的发现，Form.Select 中的大型数据集导致了这个问题，因为如果我将 options={this.state.allCountries} 替换为 options={[ { key: 1, value: "india", text: "india"} ]}，一切开始正常工作。或者，如果我删除 Form.Select，则表单也可以正常工作。

几个问题？

1. 这是一个已知问题吗？
2. 有哪些可能的解决方案？

Answer 1

我发现这是 Form.Select 的问题。我用 select 改变了它，然后一切顺利。这是选择的更新代码:

<Form.Field > 
  <label htmlFor="location.country">Country</label>
  <select 
    name="location.country" 
    id="location.country" 
    value={values.location.country } 
    onChange={event => {
    setFieldValue("location.country", event.target.value);
    }}
  >
    <option key={0} value={undefined}>
      -select-
    </option>
    {this.state.allCountries}
  </select>
</Form.Field>

这呈现了类似(有点)的选择元素，没有缓慢问题。

希望对大家有帮助。