Necesito tu ayuda para establecer el nuevo valor en múltiples objetos. Tuve un objeto como este:
constructor(props){ this.state = { objData : [{ score:{q1:null,q2:null,q3:null}, data:{id:123, name:"Steven CHS"} }, { score:{q1:null,q2:null,q3:null}, data:{id:124, name:"Christian"} }, ] } }y me gustaría cambiar el valor por clave q1,q2, anda q3. Cuando traté de usar destructor como este, no funciona.
const handleChangeScore = (e,type,id) =>{ const cScore = e.target.value; this.setState((state) => { return { objData: state.objData.map((item) => { if(item.data.id !== e.target.name) return item; else return {...item.score.q1, cScore}; }) }; }); } este es el JSX donde se usa handleChangeScore() :
this.state.objData .map((v,index)=>( <tr> <td>{index+1}</td> <td>{v.data.id} - {v.data.name}</td> <td><input type="text" name={v.data.id} className="form-control" onChange={(e)=>handleChangeScore(e,"q1",v.data.id)} defaultValue={(v.score.q1) ? v.score.q1 : 0} /></td> <td><input type="text" name={v.data.id} className="form-control" onChange={(e)=>handleChangeScore(e,"q2",v.data.id)} defaultValue={(v.score.q2) ? v.score.q2: 0} /></td> </tr> ))El problema es cuando uso destructor para cambiar el valor en varios objetos con una clave específica, no funciona o no cambia el valor. ¿Alguien puede ayudarme a arreglar mi código? Aquí está el código completo en codesanbox
Pocas cosas por arreglar
Su item.data.id es un número y e.target.name es una cadena. Para compararlos sin comparación de tipos, use != en lugar de !== .
El bloque else debe corregirse como se muestra a continuación.
handleChangeScore = (e, type, id) => { const cScore = e.target.value; this.setState((state) => { return { ...state, objData: state.objData.map((item) => { if (item.data.id != e.target.name) return item; else { return { ...item, score: { ...item.score, [type]: cScore } }; } }) }; }); };Pruebe el siguiente código sin necesidad de usar map() . simplemente pase el index en la función this.handleChangeScore() !
¡Y coloque handleChangeScore() esta función fuera de render() !
export class App extends Component { constructor(props) { super(props); this.state = { objData: [ { score: { q1: null, q2: null, q3: null }, data: { id: 123, name: "Steven CHS" } }, { score: { q1: null, q2: null, q3: null }, data: { id: 124, name: "Christian" } } ] }; } handleChangeScore = (value, index, childObj) => { this.state.objData[index].score[childObj] = value; this.setState(this.state); }; render() { return ( <div className="App"> <table border="1"> {this.state.objData.map((v, index) => ( <tr> <td>{index + 1}</td> <td> {v.data.id} - {v.data.name} </td> <td> <input type="text" name={v.data.id} className="form-control" onChange={(e) => this.handleChangeScore(e.target.value, index, "q1")} defaultValue={v.score.q1 ? v.score.q1 : 0} /> </td> <td> <input type="text" name={v.data.id} className="form-control" onChange={(e) => this.handleChangeScore(e.target.value, index, "q2")} defaultValue={v.score.q2 ? v.score.q2 : 0} /> </td> </tr> ))} </table> </div> ); } } export default App;