Quiero hacer en el componente de clase lo que hice en el componente de función, pero da un error. ¿Cómo puedo arreglar?
componente de función:
const [listBtnClassName, setListBtnClassName] = useState("listBtnPulse"); useEffect(() => { if (showGrid) { setListBtnClassName("listBtnPulseNone"); } }, [showGrid]); <PageFilter listBtnClassName={listBtnClassName} ></PageFilter>componente de clase:
this.state = { listBtnClassName: "listBtnPulse", }; componentDidUpdate() { if (this.props.showGrid) { this.setState({ listBtnClassName: "listBtnPulseNone" }); } } <PageFilter listBtnClassName={this.state.listBtnClassName} ></PageFilter>Error: se excedió la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita la cantidad de actualizaciones anidadas para evitar bucles infinitos.
Debe asegurarse de que el showGrid de los accesorios anteriores no sea true , pero el showGrid de los accesorios actuales es true .
Consulte este documento para obtener más información.
this.state = { listBtnClassName: "listBtnPulse", }; componentDidUpdate(prevProps) { if (!prevProps.showGrid && this.props.showGrid) { this.setState({ listBtnClassName: "listBtnPulseNone" }); } } <PageFilter listBtnClassName={this.state.listBtnClassName} ></PageFilter>