Tengo un proyecto React JS y el siguiente problema:
En el estado, tengo una matriz de decoradores y una matriz de polyPaths, es decir:
this.state = { decorators = [], polyPaths = [], }En mi método de renderizado, tengo el siguiente fragmento de código:
{this.state.polyPath.map((polyline, index) => { return ( <PolylineDecorator patterns={arrow_blue} positions={polyline} color={"blue"} opacity={0.5} key={index} addDecorator={this.addDecorator} currDecorators={this.state.decorators} checkIfSamePath={this.checkIfSamePath} /> ); })}Esto mapeará las polilíneas y generará un decorador de polilíneas.
En el componente PolylineDecorator , llamo al siguiente método:
addDecorator = (dec) => { // Add decorator to state this.setState({ decorators: [...this.state.decorators, dec] }) }Ahora mi problema es que, por alguna razón, si ya hay 2 elementos existentes en los polyPaths, solo el segundo decorador se guardará en el estado, es decir, los decoradores solo tendrán 1 elemento.
No estoy seguro de por qué sucede esto (¿tal vez porque está configurando el estado nuevamente demasiado rápido?), ¿Y qué podría hacer al respecto?
Sé que la función addDecorator se llama dos veces, con cada decorador respectivo, ¿solo guarda el último?
Gracias
addDecorator = (dec) => { // Add decorator to state this.setState({ decorators: [...this.state.decorators, ...dec] }) }use el operador de propagación en ambas matrices; de lo contrario, simplemente coloque la nueva matriz directamente dentro de la matriz anterior
o si quieres poner otra matriz nueva, hazlo
addDecorator = (dec) => { // Add decorator to state this.setState({ decorators: dec }) }