cuando cambio la fecha usando la fecha de entrada archivada, el valor de la casilla de verificación tiene que cambiar con respecto a la fecha, pero aquí cada fecha muestra el mismo valor para la casilla de verificación. He dado todo el código de trabajo que he probado en los códigos y la caja
<div> <input type="date" onChange={this.dateHandler} /> </div> {this.state.items.map((personData) => { return ( <> {" "} <div className="activity"> <div className="inneractivity" style={styles.gridstyle}> <div style={styles.txt}> <h5>{personData.mainModule}</h5></div> <div style={{ padding: "10px" }}> <div className="aflex-inner" style={styles.gridstyleinner} > {personData.sub_module.map((subModule, key) => { return ( <div key={subModule.id}> <p style={styles.pstyle}> {" "} {subModule.subModuleName} </p> <input type="checkbox" data-id={subModule.id} onChange={(e) => this.handleCheckClick(e, "items", key) } defaultChecked={ subModule.completed && subModule } /> </div> ); })} </div> </div> </div> </div> </> ); })}código de trabajo completo
https://codesandbox.io/s/snowy-firefly-rs78v?file=/src/App.js
¡Gracias por compartir una reproducción tan completa!
No estoy seguro de cómo debería funcionar la lógica aquí en detalle; supongo que al hacer clic en la casilla de verificación, la solicitud de publicación guarda los datos en el servidor, que luego se vuelve a solicitar. Cuando se vuelve a solicitar, debe tener el valor correcto en el campo completed para sub_modules .
Puedo detectar un problema relacionado con este comportamiento:
prevState[index].completed = e.target.checked; El prevState es una matriz de personData . Por lo tanto, con prevState[index] está encontrando un elemento personData . Si entendí correctamente, desea encontrar un sub_module .
esto se podria hacer asi
prevState[<personDataIndex>].sub_module[<subModuleIndex>].completedEn su función de renderizado, está haciendo un bucle de esta manera
this.state.items.map((personData) => ( // ... {personData.sub_modules.map((subModule, key) => ( // ... <input onChange={(e) => this.handle(e, "items", key)} /> // ... ))} ))Intente proporcionar valores de índice para las dos matrices que está en bucle
this.state.items.map((personData, i) => ( personData.sub_modules.map((subModule, j) => ( <input onChange={(e) => this.handleCheckClick(e, "items", i, j)} /> )) ))Y luego en el conjunto de controladores handleCheckClick completado así
prevState[i].sub_module[j].completed = e.target.checked Considere también el uso de checked en lugar de defaultChecked porque la entrada está controlada
<input type="checkbox" checked={subModule.checked} /> Otro problema con su ejemplo fue que no estaba pasando la date en que solicitó los datos, pero alguien más o usted mismo ya solucionó este problema.