유효성 검사와 함께 양식 제출을 처리하기 위해 Yup과 함께 Formik을 사용하고 있습니다. 저는 create form으로 성공적으로 지원했습니다. 그러나 업데이트 양식에서 다음과 같은 문제에 직면하고 있습니다.

아래 그림과 같이 아코디언에 여러 업데이트 양식이 있으며 제출 버튼을 클릭하면 아코디언의 모든 업데이트 양식에 적용됩니다.

양식을 제출할 때 필드 기본값을 캡처하지 않습니다.

포믹 코드:

const updateForm = useFormik({
    initialValues: {
        name: '',
        category: '',
        image: ''
    },
    validationSchema: yup.object({
        name: yup.string().min(2, "Product name should be at least 2 characters").required('Product name is required'),
        category: yup.string().required('Product category is required'),
        image: yup.string().required('Product image is required'),
    }),
    onSubmit: (values) => {
        // updateProduct(values)
        console.log(values)
    }
})

JSX: 여러 양식을 생성하는 맵이 있는 여러 제품 목록

<div className="col-lg-7">
    <div className="card-style mb-30">
        <p className="text-sm mb-20">
            Total products: {products.length}
        </p>
        {
            products.length > 0 &&
            products.map((product) => (
                <div key={product.id} className="accordion mb-2" id="accordionExample">
                    <div className="accordion-item">
                        <div className="accordion-header p-3" id="headingOne">
                            <img src={require(`../../../../public/bvend/products/${product.image}`)} className="image-in-list" alt={product.name} />
                            <span className="ms-3">{product.name}</span>
                            <span className="ms-3">{product.category}</span>
                            <span className="float-end">
                                <button onClick={() => showEditPanel(product.id)} className='p-0 text-primary btn-link btn'>
                                    <i className="lni lni-pencil-alt"></i>
                                </button>
                                <button onClick={() => showRemovePanel(product.id)} className='p-0 ms-2 text-danger btn-link btn'>
                                    <i className="lni lni-trash-can"></i>
                                </button>
                            </span>
                        </div>
                        <div id='edit-panel' className={editPanel === product.id ? 'd-block' : 'd-none'}>
                            <div className="accordion-body bg-light">
                                <Form noValidate onSubmit={updateForm.handleSubmit}>
                                    <Form.Group controlId="validationCustom01" className="input-style-1">
                                        <Form.Control
                                            className={updateForm.errors.name && "is-invalid"}
                                            name="name"
                                            required
                                            type="text"
                                            placeholder="Enter product name"
                                            onChange={updateForm.handleChange}
                                            onBlur={updateForm.handleBlur}
                                            value={product.name}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {updateForm.errors.name && updateForm.errors.name}
                                        </Form.Control.Feedback>
                                    </Form.Group>
                                    <Form.Group controlId="validationCustom02" className="select-style-2">
                                        <CategorySelect
                                            formik={updateForm}
                                            filterOption={product.category} />
                                        <Form.Control.Feedback type="invalid">
                                            {updateForm.errors.category && updateForm.errors.category}
                                        </Form.Control.Feedback>
                                    </Form.Group>
                                    <Form.Group controlId="formFileLg" className="input-style-1">
                                        <Form.Control
                                            className={updateForm.errors.image && "is-invalid"}
                                            name="image"
                                            required
                                            type="file"
                                            placeholder="Choose product image"
                                            onChange={updateForm.handleChange}
                                            onBlur={updateForm.handleBlur}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {updateForm.errors.name && updateForm.errors.name}
                                        </Form.Control.Feedback>
                                    </Form.Group>
                                    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                                        <Button type="submit" className="main-btn primary-btn btn-hover btn-sm">Update Product</Button>
                                    </div>
                                </Form>
                            </div>
                        </div>
                        <div id='remove-panel' className={removePanel === product.id ? 'd-block' : 'd-none'}>
                            <div className="accordion-body bg-light">
                                <h3>Are you sure to remove?</h3>
                                <div className="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                                    <button onClick={() => removeProduct(product.id)} className="main-btn danger-btn btn-hover btn-sm">Move to trash</button>
                                    <button onClick={() => setRemovePanel(null)} className="main-btn light-btn btn-hover btn-sm">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            ))
        }
    </div>
</div>

스택오버플로: https://stackoverflow.com/questions/73663057/how-to-use-formik-to-update-multiple-forms-in-react-js

도움말 #reactjs #formik #yup