Estoy trabajando con React/Redux y quiero usar el mismo resultado de Promise para establecer dos estados diferentes. Aquí está mi código:
useEffect(() => { fetchData().then((resp) => { Object.freeze(resp); const var1 = resp[0]; const var2 = parseData(resp[0]); props.setAction1(var1); props.setAction2(var2); }); }, []); El contenido de resp es una serie de dictados:
Array [ (95) […] ] 0: Array(95) [ {…}, {…}, {…}, … ] 0: Object { date: "6/1/11", open: 21.45673929 } 1: Object { date: "6/2/11", open: 21.02743338 } 2: Object { date: "6/3/11", open: 20.64964196 } etc... Sé que en Javascript los objetos son mutables, así que intenté hacer resp inmutable con Object.freeze(resp) . var1 debe ser el resultado con fechas de cadena y var2 debe ser el resultado con fecha convertida en objetos de Date con la función parseData , cuyo contenido es:
function parseData(data) { data.map((x) => (x.date = new Date(x.date))); return data; } Mi problema es que, cuando ejecuto esta función, var1 === var2 . La función parseData afectó no solo a var2 sino también a var1 . No entiendo cómo sucede esto, especialmente cuando congelé el objeto resp . Este es probablemente un problema con la inmutabilidad, pero no estoy seguro de a dónde más ir.
Su función parseData actualmente devuelve el mismo objeto de matriz, en el que se mutaron los objetos. Si desea que sus objetos sean inmutables, no debe tener un código como x.date = . En su lugar haz esto:
function parseData(data) { return data.map((x) => ({...x, {date: new Date(x.date)} }) ); }No creo Object.freeze(resp); congelará los objetos anidados. Podría intentar lo siguiente, pero creo que es confuso de leer.
useEffect(() => { fetchData().then((resp) => { Object.freeze(resp); Object.freeze(resp[0]); const var1 = resp[0]; const var2 = parseData(resp[0]); props.setAction1(var1); props.setAction2(var2); }); }, []); Alternativamente, puede cambiar su función parseData para devolver una copia usando el operador de propagación:
function parseData(data) { [...data].map((x) => (x.date = new Date(x.date))); return data; }No creo que Object.freeze sea lo que estás buscando. Al final, los objetos aún hacen referencia a la misma ubicación en la memoria, incluso si están congelados. Debe hacer una copia de los datos para separar los dos, de modo que pueda modificar cualquiera de ellos sin afectar al otro.
fetchData().then((resp) => { const ref1 = resp; /* Alternatively you can also use `Object.assign` */ const ref2 = [ ...resp ].map(obj => ({ ...obj })); } Como mencionó @JohnD, también puede hacerlo en su función parseData , que podría ser un poco más ordenada. ;)