Question

我有一个从数据库填充的下拉列表。第一个选项是“ none”（具有objectId的数据库中的实际记录），它应该是默认选项，并且仅在用户需要时才需要更改，否则应在提交表单时使用该初始值。但是，即使已选择它并具有有效的objectId，我仍然收到验证错误，指出该字段为空。仅当我从选择菜单中选择其他内容或选择其他内容然后再次选择“无”时，验证错误才会消失。我正在使用Joi-browser进行验证。

schema = {
    subcategoryId: Joi.string()
      .required()
      .label("Subcategory"),
}

这是选择菜单：

<Form onSubmit={this.handleSubmit}>
        <Form.Group controlId="subcategoryId">
          <Form.Label>Sub-category</Form.Label>
          <Form.Control
            as="select"
            name="subcategoryId"
            value={this.state.data.subcategoryId}
            onChange={this.handleChange}
            error={this.state.errors.subcategory}
          >
            {this.state.subcategories.map(subcategory => (
              <option key={subcategory._id} value={subcategory._id}>
                {subcategory.name}
              </option>
            ))}
          </Form.Control>
          {this.state.errors.subcategoryId && (
            <Alert variant="danger">
              {this.state.errors.subcategoryId}
            </Alert>
          )}
        </Form.Group>

这是我的状态：

  state = {
    data: {
      name: "",
      description: "",
      categoryId: "",
      subcategoryId: "",
      price: ""
    },
    categories: [],
    subcategories: [],
    errors: {}
  };

const { data: subcategories } = await getSubcategories();
this.setState({ subcategories });

这是下拉菜单的第一个字段的html输出，我想默认选择它：

<option value="5d4b42d47b454712f4db7c67">None</option>

我得到的错误是类别ID不能为空，但是选择菜单中的每个选项都有一个值。我是新来的反应者，但也许只有在更改时才实际分配值？

Answer 1

您需要编辑componentDidMount。获得子类别后，需要将状态this.state.data.subcategoryId设置为其中一个类别。这是因为您使用的是controlled component。否则，它将仍然设置为""，这不是<select>组件的有效值之一，并且很可能是验证失败的原因。

async componentDidMount() {
  // getting a copy of this.state.data so as not to mutate state directly
  const data = { ...this.state.data };
  const { data: subcategories } = await getSubcategories();

  // filter the array to a new array of subcategories that have the name === 'none'
  const arrayOfSubcategoriesWhereNameIsNone = subcategories.filter(i => i.name === 'none');

  const getIdOfFirstElementOfArray = arrayOfSubcategoriesWhereNameIsNone [0]._id;

  //set getIdOfFirstElementOfArray equal to the function's local copy of this.state.data.subcategoryId
  data.subcategoryId = getIdOfFirstElementOfArray;

  // update the state with the mutated object (the function's local copy of this.state.data)
  this.setState({ subcategories, data });
}

为mongodb中的选择菜单设置默认值

1 个答案: