Reactjs 如何在react中添加状态代码400的验证

我正在尝试编辑一个软件程序，该程序需要验证“未捕获（承诺中）错误：请求失败，状态代码400”上的错误

原因是用户试图在表上创建相同的唯一数据。这就是为什么它的状态代码是400

现在，我想为状态代码400创建一个错误处理程序，并在文本字段中返回一个字符串，声明“重复条目”

以下是我当前的验证

    import * as Yup from "yup";

const InvoiceValidationSchema = Yup.object().shape({
  customer: Yup.object()
    .required("Customer is required."),
  invoiceDate: Yup.string()
    .required("Invoice Date is required"),
  dueDate: Yup.string()
    .required("Due Date is required."),
  invoiceNumber: Yup.string()
    .required("Invoice Number is required"),
  invoiceLines: Yup.array()
    .of(
      Yup.object().shape({
        product: Yup.object().required("Required"),
        quantity: Yup.number().required("Required.").min(1, "Quantity cannot be zero."),
        // price: Yup.number().required("Required.").min(1, "Quantity cannot be zero.").typeError("")
      })
    ).required("Required")
});

export default InvoiceValidationSchema;

我希望任何人都能帮助我。谢谢

这是福米克

<Formik
    validationSchema={InvoiceValidationSchema}
    initialValues={invoiceCrud}
    onSubmit={(values, action) => {

        const invoiceLines = values.invoiceLines.map(invoiceLine => {
            return {
                ...invoiceLine,
                product: invoiceLine.product,
                price: invoiceLine.price,
                quantity: invoiceLine.quantity,
                totalAmount: invoiceLine.quantity * invoiceLine.price,
                averagePurchasePrice: invoiceLine.product.averagePurchasePrice
            }
        })

        const subTotal = invoiceLines.reduce((sum, line) => {
            return sum + line.totalAmount;
        },0)

        const totalExpense = invoiceLines.reduce((sum, line) => {
            return sum + (line.product.averagePurchasePrice * line.quantity);
        },0)

        const totalAdjustment = 0;
        const netTotal = subTotal - totalAdjustment;

        const totalDueAmount = subTotal - values.subTotal + values.totalDueAmount;


        const invoice ={
            ...values,
            invoiceLines,
            subTotal,
            totalAdjustment,
            netTotal,
            totalExpense,
            totalDueAmount
        }

        if(values.invoiceLines[0].price > 0 && values.invoiceLines[0].quantity > 0){
            submit(invoice);
            setTimeout(() => {
                action.setSubmitting(false);
            }, 1000);
        }else{
            setIsZero(true)
            action.setSubmitting(false)
        }
    }}
    render={
        ({ values, errors, touched, setFieldValue, isSubmitting }) => (
             <Form>
                 <div className="box-body" id="invoice-crud">
                     <div className="row">
                         <div className="col-lg-3 col-md-6 col-sm-12">
                         {errors.invoiceLines ? setIsProductSelected(false) : null}
                         {errors.customer ? setCustomerClass("btn btn-default dropdown-toggle transaction-form__account has-error")
                             : setCustomerClass("btn btn-default dropdown-toggle transaction-form__account")}
                             <DropdownWithSearch
                                 property={
                                     {
                                         title: "Customer",
                                         buttonClass: CustomerClass,
                                         buttonLabel: values.customer ? values.customer.partnerName : "Select Customer",
                                         newButtonLabel: "Customer",
                                         showRemove: values.customer,
                                         modalSelector: "#partner-form"
                                     }
                                 }
                                 option={{
                                     list: partnerDetails.list,
                                     total: partnerDetails.total,
                                     currentPage: partnerDetails.currentPage,
                                     pageSize: partnerDetails.pageSize,
                                     load: changePartnerPage,
                                     display: (element) => element.partnerName,
                                     onClick: (element) => {
                                         setFieldValue("customer", element)
                                     },
                                     removeSelected: () => {
                                         setFieldValue("customer", null)
                                     },
                                     search: (search) => {
                                       dropdownSearch(search, "partner")
                                     }
                                 }}
                             />{errors.customer ? <span className="errorMessage">Please select a customer</span> : null}
                         </div>
                         <FormRow validation={{errors: errors, touched: touched}} field={invoiceNumber}/>
             </Form>
        )}
</Formik>

{
const invoiceLines=values.invoiceLines.map（invoiceLine=>{
返回{
…发票行，
产品：invoiceLine.product，
价格：invoiceLine.price，
数量：invoiceLine.quantity，
合计金额：发票行.数量*发票行.价格，
averagePurchasePrice:invoiceLine.product.averagePurchasePrice
}
})
常量小计=发票行。减少（（总和，行）=>{
返回总和+行总金额；
},0)
const totalExpense=发票行。减少（（总和，行）=>{
退货金额+（行.产品.平均采购价格*行.数量）；
},0)
const totalAdjustment=0；
净成本=小计-总调整；
const totaldueaumount=小计-values.subTotal+values.totaldueaumount；
施工发票={
价值观
发票行，
小计，
总体调整，
净值，
总费用，
总应付金额
}
if（values.invoiceLines[0]。价格>0&&values.invoiceLines[0]。数量>0）{
提交（发票）；
设置超时（（）=>{
动作。设置提交（错误）；
}, 1000);
}否则{
设置为零（真）
动作。设置提交（错误）
}
}}
渲染={
（{values，errors，toucted，setFieldValue，isSubmitting}）=>(
{errors.invoiceLines？setIsProductSelected（false）：null}
{errors.customer？setCustomerClass（“btn btn默认下拉切换事务-表单__帐户有错误”）
：setCustomerClass（“btn btn默认下拉切换事务-表单\帐户”）}
element.partnerName，
onClick：（元素）=>{
setFieldValue（“客户”，元素）
},
removeSelected:（）=>{
setFieldValue（“客户”，null）
},
搜索：（搜索）=>{
下拉搜索（搜索，“合作伙伴”）
}
}}
/>{errors.customer？请选择一个客户：null}
)}

这个问题似乎与Formik和处理其中的后端错误有关，而不是其他任何问题

您可以在中检查如何在formik中手动设置后端错误

特别是，由用户@t-nunes在github中发布

---

如果发出请求的函数是以新的

async/await

样式编写的，您可能会在

try/catch

块中处理错误，对于旧的

，则
，
.catch
样式，只要服务器返回错误代码，您将使用
.catch
回调。
您是否尝试将您的逻辑封装到try…catch中进行错误处理？正如@Andrew Yakymyshyn所说，这是额外错误处理的一部分。我不确定Yup是否能够使用后端错误进行这种映射。如果事先知道某个特定值或模式，则最终可以在Yup中对照该值或模式进行检查。作为前端验证的一部分，您可以这样做。如果这与某些表单库一起用于React，如Formik或React hook表单，您也可以添加这些详细信息。；）我可以带你去看福米克。让我编辑一下这个问题。谢谢@RosenDimovI编辑了这个问题@RosenDimov