He pasado unos días en esto y ahora me está volviendo loco.
Tengo un estado en un componente principal que contiene una matriz [cadena] de cuadrados seleccionados que se pasa al componente secundario (un mapa) junto con la función de configuración del gancho. El problema es que cuando configuro los nuevos cuadrados, se cambian en el padre, pero al seleccionar otro cuadrado no se tienen en cuenta los cuadrados ya seleccionados.
function Parent(props){ const [selectedSquares, setSquares] = useState([]); useEffect(() => { console.log('parent useEffect', selectedSquares); }, [selectedSquares]); return ( <Child selectedSquares={selectedSquares} handleSquaresChange={setSquares} /> ) } function Child(props){ const {selectedSquares, handleSquaresChange} = props; useEffect(() => { console.log('child useEffect', selectedSquares) }, [selectedSquares]); const handleSelect = evt => { if(evt.target){ const features = evt.target.getFeatures().getArray(); let selectedFeature = features.length ? features[0] : null; if (selectedFeature) { console.log('select (preadd):', selectedSquares); const newTile = selectedFeature.get('TILE_NAME'); const newSquares = [...selectedSquares]; newSquares.push(newTile); const newTest = 'newTest'; handleSquaresChange(newSquares); console.log('select (postadd):', newSquares); } } return( <Map> <Select onSelect={handleSelect}/> </Map> ) }En el primer componente de selección de interacción, obtengo este resultado de la consola:
parent useEffect: [] ,
child useEffect: [] ,
select (preadd):[] ,
child useEffect:['NX'] ,
parent useEffect: ['NX'] ,
select (postadd): ['NX'] .
Haciendo la segunda selección esto se agrega a la consola:
select (preadd):[] ,
select (postadd): ['SZ'] ,
child useEffect:['SZ'] ,
parent useEffect: ['SZ'] .
Resulta que hay un addEventListener en la biblioteca que estoy usando que va mal. Gracias a todos los que respondieron, pero resulta que el problema no estaba relacionado con React ni con el estado.
Considere algo como el siguiente código. Su padre tiene una matriz con todas sus opciones. Para cada opción, representa un componente secundario. El componente secundario maneja la actividad de su propio estado.
function Parent(props){ // array of options (currently an array of strings, but this can be your squares) const allOptions = ['opt 1', 'opt 2', 'opt 3', 'etc']; return ( <> // map over the options and pass option to child component {allOptions.map((option) => <Child option={option}/>)} </> ) } function Child({ option }){ const [selected, setSelected] = useState(false); // default state is false return ( <> // render option value <p>{option}</p> // shows the state as selected or not selected <p>Option is: {selected ? "selected" : "not selected"}</p> // this button toggles the active state <button onClick={() => setSelected(!selected)}>Toggle</button> </> ) }