Tengo problemas para agregar elementos a la matriz. Quiero obtener las alturas de los elementos <p>
en la página y agregarlos a la matriz. Pero cada vez que obtiene una matriz con un elemento, parece que el valor anterior se restablece.
const Paragraph = () => { const [height, setHeight] = useState(0); const [arrayWithHeight, setArrayWithHeight] = useState([]); const ref = useRef(null); useEffect(() => { setHeight(ref.current.clientHeight); addItemsToArray(ref.current.clientHeight); }, [addItemsToArray]); function addItemsToArray(height) { setArrayWithHeight(heights => [...heights, height]); } console.log('arrayWithHeight', arrayWithHeight) return ( <div> <p ref={ref}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <p ref={ref}>Lorem ipsum dolor sit amet</p> <p ref={ref}>Lorem</p> </div> ); };
exportar párrafo predeterminado; Ejemplos de salida: [113], [124], [55]. Sin embargo, me gustaría recibir una tabla [113,124,55]. sabes cual es el problema?
La matriz arrayWithHeight
se vuelve a declarar en cada ciclo de procesamiento y solo se inserta un único valor en ella. Convierta arrayWithHeight
al estado del componente local y use una actualización de estado funcional para conservar los valores de estado anteriores.
Las actualizaciones de estado de React también se procesan de forma asincrónica, por lo que intentar usar el estado de height
para agregar al estado de arrayWithHeight
no funcionará, ya que aún no se habrá actualizado. Utilice el valor de referencia de altura actual en su lugar.
const [height, setHeight] = useState(0); const [arrayWithHeight, setArrayWithHeight] = useState([]); const ref = useRef(null); useEffect(() => { setHeight(ref.current.clientHeight); addItemsToArray(ref.current.clientHeight); }, [addItemsToArray]); function addItemsToArray(height) { setArrayWithHeight(heights => [...heights, height]); }
Solo tiene una referencia, necesitaría una referencia para cada párrafo para obtener la altura de cada uno. La siguiente es una forma de almacenar una matriz de referencias y obtener sus alturas calculadas. Extienda la matriz de alturas en la función Math.Max
para devolver el valor de altura máxima
const [height, setHeight] = useState(0); const heightRefs = useRef([]); heightRefs.current = data.map((_, i) => heightRefs.current[i] ?? createRef()); useLayoutEffect(() => { setHeight( Math.max( ...heightRefs.current.map((el) => Number(getComputedStyle(el.current).height.match(/\d+/).pop()) ) ) ); }, []);
...
<div> {data.map((el, i) => ( <p key={el} ref={heightRefs.current[i]} // <-- ref by index style={{ minHeight: height }} // <-- set a minimum height > {el} </p> ))} </div>