使用Yup进行表单验证时触摸显示错误（不使用formirk）

Question

我正在使用Yup验证模式进行React的客户端验证。 但是问题是所有错误都立即显示出来。 我只想显示特定字段的错误。

这是我的模式

  static schema = yup.object().shape({
    name: yup.string().required("name is required."),
    addressLine1: yup.string().required("Address Line 1 is required"),
    email: yup.string().email("please enter a valid email")
  });

  onChange = name => event => {
    const { value } = event.target;
    let errors = {};

    const nextState = produce(this.state, draftState => {
      switch (name) {
        case "name":
        case "email":
        case "contact":
        case "addressLine1":
        case "addressLine2":
        case "addressLine3":
        case "zipCode":
          draftState[name] = event.target.value;
          break;
        case "city":
        case "state":
          draftState[name] = event;
          break;
        case "countryId":
          draftState[name] = event.id;
          break;
        default:
          return;
      }
    });

    try {
      ManageConsigneePage.schema.validateSync(nextState, {
        abortEarly: false
      });
    } catch (e) {
      errors = { ...e };
    }
    this.setState({ nextState, errors, [name]: value }, () =>
      console.log(errors)
    );
  };



 <form className="w-100 px-5 pb-3" onSubmit={onSubmit}>
    {Object.keys(errors).length > 0 ? (
      <div className="alert alert-danger">
        <ul>
          {errors.errors.map(e => (
            <li>{e}</li>
          ))}
        </ul>
      </div>
    ) : (
      <></>
    )}
    <Form.Group controlId="ConsigneeName">
      <Form.Label className="ml-1 label required">Name</Form.Label>

      <Form.Control
        // size="sm"
        type="text"
        placeholder=""
        name="name"
        value={consignee.name}
        onChange={onChange("name")}
        required
      />
    </Form.Group>

所有错误均立即显示。  所以当我选择名称字段时，其他字段的所有错误也  得到展示。  我只想显示特定字段的错误。