Me gustaría cambiar un estado verdadero/falso en un componente secundario y pasarlo a un componente principal, donde el estado está realmente definido. En este momento, esto da como resultado solo un error.
Padre:
const PostTemplate = ({ data }) => { const [isSlider, setIsSlider] = useState(false); return ( <Layout class="page"> <main> <Views setIsSlider={isSlider} {...data} /> </main> </Layout> )} </> ); };Niño:
const Views = (data) => { return ( <div key="views" className="post__gallery views" > {data.views.edges.map(({ node: view }) => ( <divy onClick={() => setIsSlider(true)} > <GatsbyImage image={view.localFile.childImageSharp.gatsbyImageData} /> <div className="post__caption" dangerouslySetInnerHTML={{ __html: view.caption, }} /> </div> ))} </div> ); };En este momento, esto pone:
setIsSlider is not a function. (In 'setIsSlider(true)', 'setIsSlider' is false)Quizás también sea relevante el archivo console.log de React:
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.Estás pasando isSlider como accesorio. Deberías pasar setIsSlider .
Tenga en cuenta que la gestión de estado en React es un tema complejo y probablemente desee investigar un poco sobre cómo se hace en general. Pasar directamente una devolución de llamada de configuración de estado funciona, pero no se adapta bien a aplicaciones complejas.
En lugar de pasar la variable de estado , debe pasar la función de estado de esta manera:
Padre
const PostTemplate = ({ data }) => { const [isSlider, setIsSlider] = useState(false); return ( <Layout class="page"> <main> <Views setIsSlider={setIsSlider} {...data} /> </main> </Layout> )} </> ); };Niño
Tienes que usar data.<function_passed_via_props> para acceder a la función setIsSlider , así:
const Views = (data) => { return ( <div key="views" className="post__gallery views" > {data.views.edges.map(({ node: view }) => ( <divy onClick={() => data.setIsSlider(true)} > <GatsbyImage image={view.localFile.childImageSharp.gatsbyImageData} /> <div className="post__caption" dangerouslySetInnerHTML={{ __html: view.caption, }} /> </div> ))} </div> ); };Para corregir: cambie setIsSlider={isSlider} por setIsSlider={setIsSlider} .
Sin embargo, en caso de que necesite administrar más de unos pocos estados en todos los componentes. Sugeriría usar Redux . Esto puede centralizar sus estados de uso común, puede acceder o actualizar estos estados en cualquier componente usando Redux.