如何使用表单中的值来表示多个错误

Question

我有一个密码字段，我需要与不同的验证步骤进行比较。

这就是我做的方式

errors.password = {};
if (!values.password) {
    errors.password.main = "Password is required"
} 
else {
  if(values.password.length < 7) errors.password.min = true
  if(!(/[a-z]/.test(values.password))) errors.password.uc = true
  if(!(/[0-9]/.test(values.password))) errors.password.num = true
  if(!(/[^A-Za-z0-9]/.test(values.password))) errors.password.sc = true    
}
if(Object.keys(errors.password).length === 0) errors.password = undefined

它应该与此相关：

    <input {...input} .../> // errors.password.main
    <div>
      <ValidPasswordContainer img={pwErr} text="One lower case character" />
      <ValidPasswordContainer img={pwErr} text="One number" />
    </div>
    <div>
      <ValidPasswordContainer img={pwErr} text="One special number" />
      <ValidPasswordContainer img={pwErr} text="8 character minimum" />
    </div>

返回对象的正确方法是什么，以便验证成功并呈现错误？

这是我得到的错误： Uncaught Error: Objects are not valid as a React child (found: object with keys {main}). If you meant to render a collection of children, use an array instead.

提前致谢！