Tengo una variedad de elementos de cajones en los que estoy tratando de cambiar el estado. Escribí una función que pensé que funcionaría para alternar los elementos individuales del cajón, pero no funciona. Obtengo un TypeError: drawer.setState is not a function . No estoy exactamente seguro de cómo hacer que funcione. ¿Alguien tiene algún consejo sobre cómo hacer eso? ¡Gracias por adelantado!
class CategoryList extends React.Component<CategoryListProps, CategoryListState> { constructor(props) { super(props); const drawers = this.props.items.map((item) => ({ open: false, heading: item.heading, drawerHeading: item.drawerHeading, drawerContent: item.drawerContent, })); this.state = { drawers }; this.handleToggle = this.handleToggle.bind(this); } handleToggle = (drawer) => { drawer.setState({ open: !drawer.open }); }; render() { return ( <div className="pb-10"> <h5 className="pb-8 text-white md:text-center">{this.props.heading}</h5> <div className=""> {this.state.drawers.map((drawer) => ( <div className="flex flex-col items-baseline w-full py-6 text-white border-b md:flex-row border-b-white"> <h3 className="flex-shrink-0">{drawer.heading}</h3> <div className="right"> <p className="font-serif text-xl">{drawer.drawerHeading}</p> {drawer.open && <CategoryListDrawer drawer={drawer} />} </div> <div className={`flex items-center self-end justify-center w-12 h-12 ml-auto transform border border-white rounded-full toggle-btn cursor-pointer ${drawer.open === true ? 'open' : ''}`} onClick={this.handleToggle(drawer)}> <span className="w-6 h-6 overflow-hidden transition-transform duration-75 transform toggle"></span> </div> </div> ))} </div> </div> ); } }drawer es un objeto que se ve así:
{ open: false, heading: item.heading, drawerHeading: item.drawerHeading, drawerContent: item.drawerContent, } No tiene una función setState . Para establecer el estado, deberá hacer this.setState . Pero también necesita modificar su código de otras maneras para que funcione.
Primero, actualizará toda la matriz, por lo que su código necesita encontrar el elemento en la matriz y actualizar solo eso. Podría ser más fácil pasar un índice en lugar del cajón, pero podemos hacer que funcione con el drawer :
handleToggle = (drawer) { this.setState(prev => { const index = prev.drawers.indexOf(drawer); const newDrawers = [...prev.drawers]; newDrawers[index] = { ...newDrawers[index], open: !newDrawers[index].open } return { drawers: newDrawers } }); } En segundo lugar, actualmente está llamando a handleToggle inmediatamente, durante la representación, y luego pasa undefined a onClick . En su lugar, debe crear una nueva función y pasarla a onClick . Es decir, en lugar de esto:
onClick={this.handleToggle(drawer)}Hacer esto:
onClick={() => this.handleToggle(drawer)}En tercer lugar, no sirve de nada vincular una función de flecha, por lo que puede eliminar esta línea:
this.handleToggle = this.handleToggle.bind(this);