mi componente de diseño principal:
function MainPage() { return( <div> <MLayout children={<MNavbar custOrFalse={false} />} /> </div> ); } export default MainPage;componente de la barra de navegación de mi hijo:
const Navbar = ({...props},{children}) => { const [grid, makeGrid] = useState(false); //whatever is inside the parenthesis is the starting value const [publish, makePublish] = useState(false); const [research, makeResearch] = useState(false); const [custOrFalse, makeCustToggle] = useState(props.custOrFalse); const [custCount,setCount] = useState(0); function CustToggle(){ makeCustToggle(prevVal=>!prevVal); //useState is an async function, so need to use the previous value. } //can set this navbar to be cust based or not var custButton='cust page' if ( custOrFalse===true ) { custButton='cust login' }; var countFirst = (custCount == 0); console.log(countFirst) // useEffect(()=>{ // console.log(custCount); // },[custOrFalse]); console.log(custCount); return ( <div> <nav className = {`${styles.page__menu} ${styles.page__custom_settings} ${styles.menu}`} > <ul className = {`${styles.menu__list} ${styles.r_list}`} > <CustomNavButtonLeft navbutton='the grid' /> <CustomNavButtonLeft navbutton='publish' /> <CustomNavButtonLeft navbutton='research' /> <CustomNavButtonRight navbutton={custButton} onClick={CustToggle,()=> setCount(custCount + 1)} /> </ul> </nav> {custOrFalse&&<Registration/>} {countFirst&&!custOrFalse&&<DLogin/>} </div> ); }; export default Navbar;Estoy tratando de obtener el botón en la barra de navegación para alternar entre los textos y los componentes que representa, PERO que la primera representación no muestre un componente que aún no he creado, por lo que, en efecto, no muestra nada.
cuando ejecuto este código, el registro de la consola muestra:
true 0 false Tenía la impresión de que simplemente se mostraría true , pero por alguna razón, ¿parece que el conteo se realiza tan pronto como se procesa el componente?
de la investigación de lo que entiendo, useEffect es una función asíncrona, pero no estoy seguro de cómo eso afecta el flujo aquí
actualizado para mostrar que una vez que se agrega el contador, la palanca deja de funcionar
si está tratando de llamar a ambos métodos onClick, debe hacer
onClick={()=> { CustToggle(); setCount(custCount + 1) }} ``` instead of your current syntaxDado que está utilizando el valor anterior de custCount , su setter de estado debe aceptar un argumento de devolución de llamada ( las actualizaciones de estado pueden ser asíncronas en React ).
()=> setCount(count=> count+1).Además, está inicializando un estado desde props. Este es un antipatrón en React.
const [custOrFalse, makecustToggle] = useState(props.custOrFalse);Ver este artículo medio :
Personalmente, reescribiría su componente Navbar de la siguiente manera, para usar getDerivedStateFromProps :
class Navbar extends React.Component { constructor(props) { super(props); this.state = {grid:false, publish: false, research: false, custOrFalse: false, custCount: 0}; } static getDerivedStateFromProps(props, state) { return {custOrFalse: props.custOrFalse}; } custToggle = ()=>{ this.setState(oldState=> { return {custToggle: !oldState.custToggle, custCount: oldState.custCount+1}; }); } render() { // ..... } }