エンレリオ

パーティションをASP .Net Core 2.1 , Erros de valida Prepositive o no Servidor , S . o enviados para o client no formato Validation Problem Details , que segue uma estrutura semelhante a seguir :

{
   "type":"https://tools.ietf.org/html/rfc7231#section-6.5.1",
   "title":"One or more validation errors occurred.",
   "status":400,
   "traceId":"|52643794-491d9e1d05c828e6.",
   "errors":{
      "Cnpj":[
         "'Cnpj' must not be empty."
      ],
      "CompanyPublicName":[
         "'Company Public Name' must not be empty."
      ],
      "CompanyInternalName":[
         "'Company Internal Name' must not be empty."
      ]
   }
}

Perceba que na応答、hは、所有者エラー、Contenedades comとしてのコンテンドンFalhasデValida Sexato oです.
エストラー・イングリザンドAxiosパラリンシは、http、eパラチェッカー、se o retorno daレタスは、フィードバックデvalidaの遺言o、euチェックスエセアhを前提とします.

Content-Type: application/problem+json; charset=utf-8

sendo - assim、vejamos meu blooトライします.AVIOS : VOR PORインボカーO

try {
    let response = await AxiosInstance.post(
        '/general/companies', {}, {}
    )
} catch (e) {

    const serverSideErrors = e.response.data.errors;

    // Faz iteração nas propriedades do objeto Errors, e usa o método 
    // *SetError* do ReactHookForm, para informar um erro.
    Object.entries(serverSideErrors).map(([key, value]) =>
        setError(key, {
            message: value,
            type: 'serverSide'
        })
    )

}

アクシオスインターセプター

アゴラ、antesデtratar o retorno da API、先読みのコンバータのos nomes dasの所有者para lowercamelcase.
EU FAは、o isso usando um迎撃器、AO Criar Ua Inst An NCIAをします.

// Add a response interceptor
instance.interceptors.response.use(function(response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
}, function(error) {
    let newError = Object.assign({}, error);
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    if (newError.response.status === 400) {
        if (newError.response.headers['content-type'].includes('application/problem+json')) {
            /*
            Rename Problem Json response field names, to lower camel case
             */
            let serverData = newError.response.data;

            let errorsLowerCamelCase = Object.fromEntries(
                Object.entries(serverData.errors).map(([key, value]) =>
                    // Modify key here
                    [`${stringUtils.toLowerCamelCase(key)}`, value]
                )
            )

            newError.response.data.hasValidationErrors = true;
            newError.response.data.errors = errorsLowerCamelCase;
        }
    }
    return Promise.reject(newError);
});

結論

パラRenderizar OS Errosインライン、Estou USANOブートストラップフォームグループ、E OコンポーネントErrorMessage Do Rp - Prioはフックフォームを反応させます.

<ErrorMessage name="companyInternalName"
              errors={errors}
              render={({message}) =>
                <div className={'field-error text-danger'}>{message}</div>
              }

Configuro ESSE Componentte pra cada campo do formul res rio , e ao fazer submit to formul res rio , ma - rensi posiureo o http ' s feita , o retorno - like tratado , e o result result - texiado , exibido abaixo :

B . Nus : como Exbir Mensagens de validaの結果<資料>

<研究ノート>第一次世界大戦後の世界における研究の展開

{
   "type":"https://tools.ietf.org/html/rfc7231#section-6.5.1",
   "title":"One or more validation errors occurred.",
   "status":400,
   "traceId":"|526437a6-491d9e1d05c828e6.",
   "errors":{
      "$":[
         "essa mensagem de validação aqui, não está associada a nenhum campo específico. 📍"
      ]
   }
}

Percba que o o dentificorは、カンポ、OobJouエラー、Muを持っていません.
Sendo Aassim、Colyquei topo da Tera、um構成要素 $ 、オンデO Atbuto < ErrorMessage /> .
Isoso私perperiteは、topoをします.

<ErrorMessage name="$"
errors={errors}
render={({message}) =>
  <>
    <FormGroup row>
      <Col md="4">
        <span>⚠️ Atenção:</span>
</Col>
<Col md="8">
  <div className={'field-error text-danger'}>{message}</div>
</Col>
</FormGroup>
</>
}
/>

私のAvisa Nos comentは、rios seプリザルデアルマAjudaを引きます.