Soy nuevo en React y no estoy seguro de lo que estoy haciendo mal aquí. Tengo un componente llamado Bloques que contiene una matriz de subcomponentes en estado. En este momento, cuando agrego el subcomponente Paragraph , lo hago así. Esto está en el componente principal Blocks .
handleAddBlock(block) { let new_block = null; let last_block_id = this.state.last_block_id; last_block_id++; new_block = { component: <Paragraph key={last_block_id} id={last_block_id} />, id: last_block_id, value: null } this.setState({ last_block_id: last_block_id }); this.setState({ blocks: [...this.state.blocks, new_block] }); }El componente Párrafo tiene un "valor" de variable de estado, que se actualiza cuando un usuario escribe en un cuadro de texto. Sin embargo, cuando voy a eliminar un elemento de this.state.blocks, todos los componentes que vienen después del componente que estoy eliminando se vuelven a procesar y pierden su estado. Los componentes que vienen antes del elemento que eliminé mantienen los suyos. La pregunta es por qué y cómo puedo evitar que eso suceda. ¿Es este un mal patrón de diseño?
Aquí está el código que maneja la eliminación de un subcomponente. Esto está en el componente principal Blocks .
handleRemoveBlock(id) { const blocks = [...this.state.blocks].filter(block => { return block.id !== id; }); this.setState({ blocks: blocks }); }Y finalmente, esto es parte del método render() en el componente principal Blocks .
render() { const blocks = this.state.blocks.map(block => { return <div key={block.key} className="col p-1" >{block.component} <button className="delete-button" onClick={() => this.handleRemoveBlock(block.id)} type="button">X </button> </div> }) return <section className="row"> <div className="col"> <div className="col"> {blocks} </div> </div> </section> }Tengo un componente llamado Bloques que contiene una matriz de subcomponentes en estado.
no deberías Los componentes deben contener la menor cantidad posible de datos en su estado. El principal concepto de diseño de React es que el método de renderizado del componente es una función pura de los accesorios y el estado. En base a esto, debe mover las instancias de <Paragraph/> (porque debe representar los componentes solo en el render ) y last_block_id (porque es computable desde el estado de los blocks ) del state al render :
class Block extends React.Component { handleAddBlock(block) { const new_block = { ... } this.setState('blocks', [...this.state.blocks, new_block]) } get last_block_id() { return this.state.blocks.at(-1).id } render() { // your markup return <...> // create Paragraph here {this.state.blocks.map(block => <Paragraph key={block.id} id={block.id} />) <.../> } }