hola, estoy tratando de configurar useState pero falla todo el código. aquí estoy enviando propstype del componente principal al componente secundario. entonces, cuando la condición propstype está marcada/verdadera, estoy tratando de configurar useState pero en lugar de configurarlo se bloquea. verifique a continuación lo que probé. Aquí eliminé el código no deseado; de lo contrario, será demasiado grande para los lectores y es posible que pierdan el enfoque de la pregunta. ¿Alguien puede sugerirme alguna solución nueva para esto? He probado muchas y luego vine aquí para encontrar la solución adecuada.
componente principal (BillComponent)
const BillComponent = () => { return( {/* Add Bill form */} <Drawer title={"Add Bill"} placement="right" onClose={onClose} visible={visible} className="ant-drawer-half" > <AddBill parentCallback={handleCallback} type="add" /> // <---This AddBill is child component and here I'm passing props type as add </Drawer> </> </> ); }; export default BillComponent;componente secundario (AddBill)
const AddBill = (props) => { const [checked, setChecked] = useState(false); if(props.type === "add"){ setChecked(false); //<---This is where main code is crashing. when I set useState }else{ setChecked(true); } return( // divs of project ); }; export default AddBill;No estoy seguro si ese es tu caso porque no mostraste el error. Probablemente el error sea algo relacionado con "Demasiados renderizados".
Es una mala práctica usar esos ganchos React en la "raíz" del componente. En tu caso particular, yo haría lo siguiente:
const [checked, setChecked] = useState(false); useEffect(() => { if (props.type === "add") { setChecked(false); } else { setChecked(true); } }, [props.type]);Por favor, comparte el error que estás recibiendo. Además, ¿por qué no usar simplemente: const [checked, setChecked] = useState(props.type === 'add');