Reactjs React最终表单-验证返回键&；值而不是字符串

目前我正在使用React Final Form，我希望返回一个对象或键/值，而不是一个错误字符串

这是我的验证规则：

validate={values => {
        const errors = {}
        if (!values.username) {
          errors.username = 'Required'
        }
        if (!values.password) {
          errors.password = 'Required'
        }
        if (!values.confirm) {
          errors.confirm = 'Required'
        } else if (values.confirm !== values.password) {
          errors.confirm = 'Must match'
        }
        return errors
      }}

这将打印错误：

  {meta.error && meta.touched && <span>{meta.error}</span>}

{meta.error&&meta.toucted&&{meta.error}

我不想看到Required，而是想说：key->“Required”，这个key的值是“请填写字段”。我知道可以更改“Required”的字符串，但我想要一个键值。我不能制造一个物体，它不允许我

预期结果： {meta.error&&meta.toucted&&{meta.error.required}

用户界面将显示： 请填写这个字段

可以使用react最终形式，因为它几乎相同：

---

好吧，你可以这样做：

  <Form
      onSubmit={onSubmit}
      validate={values => {
        const errors = {}
        if (!values.username) {
          errors.username = { required: true, text: "Please fill in the field"} // this is used as an object
        }
        if (!values.password) {
          errors.password = 'Required'
        }
        if (!values.confirm) {
          errors.confirm = 'Required'
        } else if (values.confirm !== values.password) {
          errors.confirm = 'Must match'
        }
        return errors
      }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <Field name="username">
            {({ input, meta }) => {
              console.log(meta) // to see the structure of your meta
              return (
              <div>
                <label>Username</label>
                <input {...input} type="text" placeholder="Username" />
                {meta.error && meta.touched && <span>{meta.error.text}</span>}
// then here if you still want to use string you can put what you need
                  </div>
                )}}
              </Field>
              <Field name="password">
                {({ input, meta }) => (
                  <div>
                    <label>Password</label>
                    <input {...input} type="password" placeholder="Password" />
                    {meta.error && meta.touched && meta.required && <span>{meta.error}</span>}
                  </div>
                )}
              </Field>
              <Field name="confirm">
                {({ input, meta }) => (
                  <div>
                    <label>Confirm</label>
                    <input {...input} type="password" placeholder="Confirm" />
                    {meta.error && meta.touched && <span>{meta.error}</span>}
                  </div>
                )}
              </Field>
              <div className="buttons">
                <button type="submit" disabled={submitting}>
                  Submit
                </button>
                <button
                  type="button"
                  onClick={form.reset}
                  disabled={submitting || pristine}
                >
                  Reset
                </button>
              </div>
              <pre>{JSON.stringify(values, 0, 2)}</pre>
            </form>
          )}
        />

{
常量错误={}
如果（！values.username）{
errors.username={required:true，text:“请填写字段”}//此字段用作对象
}
如果（！values.password）{
errors.password='Required'
}
如果（！values.confirm）{
errors.confirm='Required'
}else if（values.confirm！==values.password）{
errors.confirm='必须匹配'
}
返回错误
}}
render={（{handleSubmit，form，submiting，pristine，values}）=>(
{（{input，meta}）=>{
log（meta）//查看元的结构
返回(
用户名
{meta.error&&meta.toucted&&{meta.error.text}
//然后在这里，如果你仍然想使用字符串，你可以把你需要的
)}}
{（{input，meta}）=>(
密码
{meta.error&&meta.toucted&&meta.required&&&{meta.error}
)}
{（{input，meta}）=>(
证实
{meta.error&&meta.toucted&&{meta.error}
)}
提交
重置
{JSON.stringify（值，0，2）}
)}
/>

我也有同样的解决方案，制作了一个对象，但失败了。比我试过你的好，但效果不错。我想我做错了什么。