Javascript 如何使用react hook和yup验证一个对象中的两个字段 { 标签：“房间”， 姓名：'房间'， 规则：yup.array（yup.object（））.required（）， 渲染器：（数据：任意）=>{ const{control，register，errors}=useFormContext（）； 返回( { teacherRole&&teacherRole.map（（项目，idx）=>( ( {label:x.name，value:x.id} )) } onChange={（val）=>control.setValue（'room'，settacher（val，idx））} value={control.getValues（）['selectTeacher']} 样式={{width:'100%} /> - control.setValue（'room'，setRole（val，idx））} value={control.getValues（）['selectRole']} 样式={{width:'100%'，paddingRight:'.3rem'} /> )) } ) } }

我在这里要做的是验证老师和房间是否是空的。 因为当我尝试提交表单时，即使表单为空，它也会提交

---

我想要的是在角色或教师为空时添加验证，错误消息应该出现。

我不知道

教师

和

角色

的类型，所以我假设是这样。希望这对我有帮助

{
        label: 'Room',
        name: 'room',
        rule: yup.array(yup.object()).required(),
        renderer: (data: any) => {
          const { control, register, errors } = useFormContext();
          
          return (
            <div className="block w-full">
              {
                teacherRole && teacherRole.map((item, idx) => (
                  <div key={idx} className="flex pb-2 items-center">
                    <SelectPicker
                      placeholder={'TEACHER'}
                      data={
                        teacherList && teacherList.map(x => (
                          { label: x.name, value: x.id }
                        ))
                      }
                      onChange={(val) => control.setValue('room', setTeacher(val, idx))}
                      value={control.getValues()['selectTeacher']}
                      style={{ width: '100%' }}
                    />
                    <span className="px-2 leading-8 text-2xl">-</span>
                    <SelectPicker
                      data={[
                        { label: 'Admin', value: 'ROLE_ADMIN' },
                        { label: 'Teacher', value: 'ROLE_TEACHER' },
                        { label: 'Student', value: 'ROLE_STUDENT' },
                      ]}
                      placeholder={'Role'}
                      onChange={(val) => control.setValue('room', setRole(val, idx))}
                      value={control.getValues()['selectRole']}
                      style={{ width: '100%', paddingRight: '.3rem' }}
                    />
                  </div>
                ))
              }
            </div>
          )
        }
      }

---

首先，你没有关闭第一行的字符串，所以几乎整个对象都是无效的。@samuei已经更新。教师和角色的类型选择它将如何在选择元素上显示错误消息？你可以从表单上下文中获取错误并显示它们。我试着控制错误，但是它只显示

room:{message:“room必须是`array`类型，但最终的值是：`null`（从值````转换而来）。如果“null”是空值，请确保将架构标记为`.nullable（）`}

如何显示这两个select类型？

  Yup.array().of(
      Yup.object().shape({
        teacher: Yup.string().required("teacher required"),
        role: Yup.string()
          .required("role required")
      })
    )
  })