Estoy usando las casillas de verificación React Final Form. Cuando realizo un cambio en mi código, el nextjs realiza una recarga en caliente, pero los valores/datos del formulario mantienen la casilla de verificación para que siga siendo veraz, pero la casilla de verificación se desmarca. Pensé que si se recarga, ¿debería restablecer el formulario?

Entonces, por ejemplo, si tengo 2 elementos en una lista con casillas de verificación, si marco 1 elemento, tendré una longitud de 1, luego, cuando nextjs se recarga en caliente, parece que no hay nada marcado (lo que debería esperarse), pero si marco el mismo elemento, se agregará a la lista con una longitud de 2 elementos marcados (1 de la recarga en caliente anterior y luego otro 1 después de la recarga en caliente)

 <Form onSubmit={onSubmitCheckbox} render={({ handleSubmit, submitting, values }) => ( <form onSubmit={handleSubmit} className=""> <button type="submit" disabled={submitting}> Delete multiple </button> <div> {posts.map((post, index) => { return ( <div key={index}> <div> <Field name="post" type="checkbox" component="input" value={post} // onChange={(event, value) => // console.log("checked", event, value) // } > {({ input, meta }) => { return ( <input {...input} onChange={(e) => { input.onChange(e); //final-form's onChange console.log("onChange", values); }} /> ); }} </Field> </div> </div> ); })} </div> </form> )} />

¿Se supone que este es el comportamiento esperado? ¿Estoy haciendo mal las casillas de verificación?

 const onSubmitCheckbox = (values) => { const { post } = values; console.log("submitting checkbox", post.length); };

Esta es la función onsubmit y mostrará 2 de los elementos de la publicación.