无法使用我保存在 props 中的 id 作为 React select 中的默认值

Question

我有一个呈现可重用下拉列表的组件。当我使用它添加新项目时，我可以设置类别，但是，当我使用它编辑项目时，下拉列表不会显示所选类别，但我已将类别 _id 作为道具发送。

export default function RHFSelect({
  label,
  name,
  register,
  options,
  required,
  validationschema,
  errors,
  categoryID = "",
}) {
  return (
    <div>
      <select
        className="textField__input"
        {...register(name, validationschema)}
        id={name}
        defaultValue={categoryID}
      >
        <option value="">Please select the project category</option>

        {options.map((option) => {
          return (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          );
        })}
      </select>
      {errors && errors[name] && (
        <span className="text-error block text-sm mt-2">
          {errors[name]?.message}
        </span>
      )}
    </div>
  );
}

选项是从数据库获取的类别列表。 默认情况下，categoryID 是一个空字符串，但在编辑项目模式下，它是一个类别的 id，该项目属于该类别。 我希望在添加模式下显示“请选择项目类别”，在编辑模式下显示我之前选择的类别。

提前致谢。

Answer 1

不要直接在选择中使用默认值，而是在react-hook-form或您正在使用的任何库表单中使用默认值，或者像这样更新以获得简单的解决方案

<select
 className="textField__input"
 {...register(name, validationschema)}
 id={name}
 value={categoryID}
 onChange={(e) => register(name).onChange(e)}>

或使用 setValue('notRegisteredInput', 'value'); // useEffect 钩子中的示例在重新渲染时设置初始值。