Tengo un estado de objeto priceRanges en el componente A, que inicializo con una clave y un valor:
const [priceRanges, setPriceRanges] = useState({ [randomId]: { "price": 0, "quantity": 0 } })Y luego páselo a través de accesorios al componente B:
<ComponentB pricesRanges={pricesRanges} ...props />El problema es que en el Componente B, estoy convirtiendo este objeto en una matriz en useEffect:
React.useEffect(() => { const getArrayData = () => { const keys = Object.keys(priceRanges) keys.map(key => { console.log(priceRanges[key]["price"]) priceRangesArray.push({ id: key, price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0, quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0 }) }) } getArrayData() }, [priceRanges]) Pero el componente no se vuelve a representar después de que se haya ejecutado useEffect. Como tal, el componente no representa el estado inicial con el que se inicializaron los pricesRanges de precios. Para probar esto, hice esto:
{priceRangesArray.length > 0 ? (priceRangesArray.map(quantityAndPrice => { return ( <div className="flex" key={quantityAndPrice.id}> {console.log("I AM RENDERING")} <input ...props /> <input ...props /> </div> ) })) :<p>Hello</p>}Que siempre representa Hola en el montaje. ¿Cómo puedo abordar esto? Gracias !
La única forma de provocar una nueva representación es establecer el estado. Mutar una matriz durante un useEffect no provocará una nueva representación. Entonces, podría solucionar esto agregando una variable de estado y luego configurando el estado una vez que haya calculado la matriz.
Sin embargo, creo que ese no es el enfoque correcto aquí. Su matriz son datos derivados: se basan directamente en lo que hay en priceRanges y no desea que se desvíe nunca de eso. Entonces, para esto, calcularía el valor en línea durante la representación del componente:
const Example = ({ priceRanges }) => { const keys = Object.keys(priceRanges); const priceRangesArray = keys.map((key) => { return { id: key, price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0, quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0, }; }); // ...rest of the component } Si el rendimiento es una preocupación, puede ajustar esto en useMemo para omitir el cálculo si priceRanges no ha cambiado.
const Example = ({ priceRanges }) => { const priceRangesArray = useMemo(() => { const keys = Object.keys(priceRanges); return keys.map((key) => { return { id: key, price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0, quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0, }; }); }, [priceRanges]); // ... rest of the component };