0
145
VistasAlternar componente sin cambiar de estado
Tengo un componente Scroller que no controlo y que toma datos como accesorio.
Estos datos son una lista de objetos. Dentro del objeto, una de las teclas asume una función.
Este componente tiene la capacidad de hacer clic en el cuadrado y mostrar un nuevo componente (como una ventana emergente).
El componente Scroller que no controlo tomando la propiedad de datos.
<Scroller data={getData(allData)} />Estos son los datos que se pasan. El contenido es una lista de objetos.
const getData = (content) => content.map((c, i) => ({ header: c.header, customOnClick: (() => { setClicked(true); // this is the line which resets the scroll }), } )); Así que esto funciona según lo previsto. Al hacer clic, se muestra el nuevo contenido emergente. Esto se debe al cambio de estado a través de la función setClicked .
El problema es que este componente Scroller tiene una opción de desplazamiento. Entonces, el usuario podría haberse desplazado pasando un bloque (0) como la siguiente imagen.
Pero en el momento en que hago clic en el botón para mostrar la ventana emergente, restablece la posición de desplazamiento a 0 como sigue. En lugar de permanecer en la posición anterior.
This scroll reset is the issue.
Esto está siendo causado por la llamada a la función setClicked. No importa si hago algo con eso. Mientras lo llamo, se reinicia.
Mostrar el componente emergente no es el problema. La mera llamada a setClicked es el problema.
Por lo tanto, me pregunto si hay alguna manera de alternar la visualización del componente emergente sin tener que establecer el estado.
O una forma de mantener la posición de desplazamiento sin restablecer el desplazamiento.
Tenga en cuenta que en este caso estoy usando ganchos. Es el mismo resultado si uso Redux. Por favor aconséjame.
Este es mi componente que puedo controlar.
import React, { Fragment } from 'react'; import Scroller from 'comp-external-lib'; import PopUpComponent from './PopUpComponent'; const MyComponent = ({data}) => { const [isClicked, setClicked] = React.useState(false); const { allData } = data; const getData = (content) => content.map((c, i) => ({ header: c.header, customOnClick: c.customOnClick && (() => { setClicked(true); // this is whats causing the reset for scroll }), } )); return ( <Fragment> <Scroller data={getData(allData)} /> { {/* Doesn't matter if this is commented out. The scrolling will still reset due to call to setClicked function */} {/* isClicked && <PopUpComponent /> */} } </Fragment> ); }; export default MyComponent;3 Respuestas
Responde la pregunta0
Explicación: cada vez que se llama a setClick , el valor de isClicked cambia, lo que hace que se vuelva a evaluar MyComponent . Dado que allData se inicializa dentro de MyComponent , se reiniciará cada vez que se vuelva a evaluar MyComponent . Otro problema es que los data que se envían a Scroller son el resultado de una función que toma allData . Cada vez que se vuelve a evaluar MyComponent , esa función se ejecutará nuevamente y devolverá una nueva instancia de matriz dada la nueva instancia allData . Esto significa que cada vez que MyComponent se vuelve a evaluar, Scrollbar obtiene una nueva instancia de data , lo que hace que cualquier cosa que consuma data dentro de Scrollbar también se vuelva a evaluar.
Solución: mi sugerencia sería utilizar el gancho useMemo de reaccionar (docs: https://reactjs.org/docs/hooks-reference.html#usememo ) para 'memoizar' los datos que entran en Scroller :
import React from 'react'; import Scroller from 'comp-external-lib'; import PopUpComponent from './PopUpComponent'; const MyComponent = ({data}) => { const [isClicked, setClicked] = React.useState(false); const scrollerData = React.useMemo(()=> { return data.allData.map((c, i) => ({ header: c.header, customOnClick: c.customOnClick && (() => { setClicked(true); // this is whats causing the reset for scroll }), } )); },[data]) return ( <> <Scroller data={scrollerData} /> { {/* Doesn't matter if this is commented out. The scrolling will still reset due to call to setClicked function */} {/* isClicked && <PopUpComponent /> */} } </> ); }; export default MyComponent; También dato curioso, <> es la abreviatura de React's Fragment
0
El problema podría ser que cada vez que hace clic en el componente, su Scroller obtiene una referencia diferente de los datos y, por eso, llama a métodos de ciclo de vida que causan su problema de rendimiento. Si va a enviar los mismos accesorios (misma referencia) a Scroller , no debería llamar a ningún método de ciclo de vida que probablemente cause sus problemas.
import React, { Fragment, useMemo, useState } from 'react' import Scroller from 'comp-external-lib' import PopUpComponent from './PopUpComponent' const MyComponent = props => { const [isClicked, setClicked] = useState(false) const { allData } = props.data const getData = content => content.map((c, i) => ({ header: c.header, customOnClick: c.customOnClick && (() => { setClicked(true) }) })) const scrollerData = useMemo(() => getData(allData), [allData]) return ( <Fragment> <Scroller data={scrollerData} /> {isClicked && <PopUpComponent />} </Fragment> ) } export default MyComponent0
Está llamando a getData en cada ciclo de procesamiento y, por lo tanto, provoca un reinicio del estado: data={getData(allData)}
La solución será envolver la función getData con un gancho useCallback:
const getData = useCallback((content) => content.map((c, i) => ({ header: c.header, customOnClick: c.customOnClick && (() => { setClicked(true); // this is whats causing the reset for scroll }), } )),[]);