Actualmente, mi lista dinámica de react/nextjs no se actualiza correctamente, he dado una matriz para mapear, por lo que mostrará una nueva fila en la actualización del marco ya que está almacenada en useState. Por lo general, el problema es con la clave de la lista que no es único, pero mi clave es única

Aquí está mi código

 const [allSelectedMaterials, setAllSelectedMaterials] = useState([]) // This variable stores a javascript object into the array {console.log('-- Updated --')} {allSelectedMaterials.map((material, i) => { const key = Object.keys(material).toString() console.log(`${i} - [${key}] ${material}`) return ( <div key={key}> <Row className='align-items-center'> <Col xs='auto'> <h6>{material[key].name}</h6> </Col> <Col> <Button variant='danger' className='mb-1' onClick={() => handleDeleteMaterial(key)}> Remove </Button> </Col> </Row> <InputGroup> <InputGroup.Text> <Image src={material[key].image} className={`${styles.allMaterialsImage}`} /> </InputGroup.Text> <Form.Control type='number' min={1} ref={(e) => (selectedMaterials.current[i] = e)} required /> </InputGroup> <div className='mt-1' /> </div> ) })}

El problema es que después de agregar el primer elemento en la lista y agregar uno nuevo, no actualizará la vista, aquí está la salida de la consola

Y aquí estoy yo agregando una segunda entrada a la lista

Dice claramente en el registro que la matriz (almacenada en useState) se actualiza pero no cambia la vista, sigue siendo la misma que la anterior. Pero si vuelvo a actualizar el marco actualizando cualquier variable useState, actualizó la lista

Actualización: aquí está mi código para agregar material nuevo (loadedMaterials es solo una lista de materiales que se recupera de una API)

 const handleAddSelectedMaterial = () => { loadedMaterials.map((material) => { const key = Object.keys(material) if (key == currentSelectedMaterial) { let _material if (allSelectedMaterials.length > 0) _material = allSelectedMaterials else _material = [] _material.push({ [material[key].id]: material[key] }) setAllSelectedMaterials(_material) } }) }