Creé un campo de entrada de verificación de días de semana personalizado en React.js cuyo propósito es mostrar a los clientes qué días están abiertos. Estoy recorriendo una matriz codificada para representar cada día con su casilla de verificación de entrada respetada en la primera fila que se muestra de lunes a jueves y en la segunda fila de viernes a domingo. Los días se almacenan en la matriz storeDays.
const [storeDays, setStoreDays] = useState([]); <div className="first-row-days"> {["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY"].map( (value, index) => ( <React.Fragment key={"iterate-1-" + index}> <input type="checkbox" value={value} key={"first-row-days-" + index} onChange={(e) => setStoresDays(e)} /> <label> {value} </label> </React.Fragment> ) )} </div> <br /> <div className="second-row-days"> {["FRIDAY", "SATURDAY", "SUNDAY"].map((value, index) => ( <React.Fragment key={"iterate-2-" + index}> <input type="checkbox" value={value} key={"second-row-days-" + index} onChange={(e) => setStoresDays(e)} /> <label> {value} </label> </React.Fragment> ))} </div>Estoy representando este código en la página Agregar y editar. Funciona bien al agregar nuevos datos, pero surge un problema cuando el usuario edita los datos del día existente. El usuario no tiene información sobre los días chequeados existentes.
¿Cómo puedo volver a llenar los datos verificados existentes del objeto de respuesta del servidor storeTime.days en la página EditDays? He intentado colocar storeTime.days[index] directamente en el atributo de valor, pero no obtengo el resultado esperado.
Ejemplo de respuesta datos de días guardados del servidor ['SATURDAY', 'SUNDAY']
Tienes que hacer 2 cambios:
La matriz de respuesta de su servidor debe estar en mayúsculas, como los datos que se están mapeando.
agregue el siguiente accesorio a las entradas de su casilla de verificación:
comprobado = {responseDataFromServer.includes (valor)}