React注册表单下拉列表触发Invalid Schema Content错误的解决方法

The "Invalid Schema Content" error you're encountering stems from invalid Joi schema definitions in your MovieForm component. Several fields in your schema are set to empty strings instead of valid Joi schema objects, which breaks the validation logic when selecting dropdown options. Let's walk through the fixes step by step:

Root Cause #

When your validateProperty function runs for fields like titleId, memberId, or orderId, it tries to create a validation schema using this.schema[name]. Since those entries are empty strings ("") instead of Joi schema objects, Joi can't process them, leading to the error.

Step 1: Fix the Schema in MovieForm #

Replace all empty string values in your schema with proper Joi rules. Even optional fields need valid Joi definitions (use .optional() for fields that aren't required):

schema = {
  _id: Joi.string(),
  salutationId: Joi.string().required().label("Salutation"),
  titleId: Joi.string().optional().label("Title(s)"), // Fixed: replaced "" with valid Joi schema
  name: Joi.string().required().label("Name"),
  initialname: Joi.string().optional().label("Initial/Middle name"), // Fixed
  surname: Joi.string().required().label("Surname"),
  username: Joi.string()
    .required()
    .label("Personal E-Mail address (used as user name)"),
  position: Joi.string().optional().label("Position with company"), // Fixed
  memberId: Joi.string().optional().label("Member of"), // Fixed
  language: Joi.string().optional().label("Language Selection"), // Fixed
  orderId: Joi.string().optional().label("Order"), // Fixed
};

Step 2: Correct a Typo in mapToViewModel #

There's a typo in your mapToViewModel function where memberId is incorrectly assigned to movie.position._id instead of movie.member._id. Fix this to ensure existing entries load correctly:

mapToViewModel(movie) {
  return {
    salutationId: movie.salutation._id,
    titleId: movie.title._id,
    name: movie.name,
    initialname: movie.initialname,
    surname: movie.surname,
    username: movie.username,
    position: movie.position,
    memberId: movie.member._id, // Fixed: was movie.position._id
    language: movie.language,
    orderId: movie.order._id,
  };
}

Step 3: Verify the Validation Function #

Your existing validateProperty function is correct once the schema is fixed. It will now properly validate all fields, including dropdown selections:

validateProperty = ({ name, value }) => {
  const obj = { [name]: value };
  const schema = { [name]: this.schema[name] };
  const { error } = Joi.validate(obj, schema);
  return error ? error.details[0].message : null;
};

Why This Works #

• Joi requires every schema entry to be a valid Joi object (created via Joi.string(), Joi.number(), etc.), not a primitive value like an empty string.
• Using .optional() tells Joi that a field can be empty but must be a string if provided, which matches the string-based _id values from your dropdown data.

Content of the question来源于stack exchange，提问作者Rehan