pasar datos de la casilla de verificación múltiple a la API solo cuando se hace clic en un botón de envío
tengo estos acordeones en mi sitio web cuando hago clic en la casilla de verificación, todos los valores de la casilla de verificación se almacenan en el estado y, por último, cuando hago clic en enviar, solo los datos se pasan a la API, los datos almacenados se proporcionan a continuación
const getAccordionItem = ({ key, label }) => { const source = key === "Custom" ? "custom" : "items"; return ( <div className="accordion-item" key={key}> <div className="accordion-title gradiantblur" onClick={() => navClose(key)} > {/* // onClick={setActiveCurrentIndex(item[0].date)}> */} <div>{label}</div> <i className="fa fa-plus" aria-hidden="true"></i> </div> {state[key] ? ( <div className="accordion-content tableforsymtm"> {(source !== "custom" ? state[source].filter( (item) => item.category === label || item.category === key ) : state[source] ).map((item, index) => { return ( <span key={`${key}__${item.id}__${index}`} className="trforsymtm" > <td> <input // className="invinsiveinput" data-id={item.id} type="checkbox" id={item.id} checked={item && item.positive} onChange={(e) => handleCheckboxChange(e, source, item.id)} /> </td> <td className="tdoneline"> <label htmlFor={item.id}>{item.name}</label> </td> </span> ); })} </div> ) : null} </div> ); }; const handleCheckboxChange = (e, stateKey, itemId) => { const stateItems = state[stateKey]; const index = stateItems.findIndex((item) => item.id === itemId); setState((prevState) => ({ ...prevState, [stateKey]: [ ...stateItems.slice(0, index), { ...stateItems[index], positive: e.target.checked, }, ...stateItems.slice(index + 1), ], })); };enviar el botón hacer clic
const chekbox = (e) => { e.preventDefault(); const headers = { }; const data = { items: [...state.items] .filter((item) => item.positive) .map((item) => ({ date: state.today, symptom: item.id, positive: item.positive, })), }; const custum = { items: [...state.custom] .filter((item) => item.positive) .map((item) => ({ date: state.today, symptom: item.id, positive: item.positive, })), }; console.log(custum); axios.post("/customer/submit-multiple/", data, { headers: headers, }); axios .post("/customer/submit-custom-multiple/", custum, { headers: headers, }) .then(() => { alert("was submitted"); window.location.reload(); }) .catch((error) => { alert("Cannot add submittedagain"); }); };código completo que he agregado en el código sandbox nota actualizada según la respuesta de Hirens https://codesandbox.io/s/objective-jone5tlds
el problema al que me enfrento ahora es que si un usuario hace clic en una casilla de verificación, su valor de verificación se agrega al estado y si el usuario desmarca la casilla de verificación antes de enviar, habrá 2 entradas en la matriz
por lo tanto, los valores de los datos de la casilla de verificación 2 no se pueden enviar a la matriz y pasar a la API
quiero que los datos se pasen algo como esto
estoy recibiendo el error 500
[ { "date" : "2022-02-15", "id" : 6, "positive" : true }, { "date" : "2022-02-15", "id" : 5, "positive" : true }, { "date" : "2022-02-15", "id" :7, "positive" : true }, { "date" : "2022-02-15", "id" : 11, "positive" : true }, { "date" : "2022-02-15", "id" : 4, "positive" : true } ]