Estoy encontrando este extraño error que todavía no puedo entender qué está sucediendo exactamente.
Estoy actualizando una matriz de estado y quiero analizar nuevos objetos en esa matriz manteniendo los antiguos.
El método conocido para mí con ES6 fue usar el operador de propagación como:
const [stories, setStories] = useState([]);...
setStories(stories => [...stories, newStories]);donde newStories también es una matriz de objetos.
Pero aquí obtengo el siguiente resultado:
mientras que cuando hago lo mismo con concat como:
setStories(stories => stories.concat(newStories));Devuelve como se esperaba:
Hasta ahora, pensé que estos 2 métodos harían lo mismo.
También encontré este artículo y eso también confirma mi conocimiento, y contradice el resultado anterior que estoy obteniendo. Ver: Mejor solución: Operador de propagación... y un envoltorio
Tomemos, por ejemplo, este código de los documentos :
let parts = ['shoulders', 'knees']; let lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"] Como puede ver, al distribuir la matriz de parts en la matriz de lyrics , extrae los datos de la matriz. Si tuvieras que escribir en su lugar:
let parts = ['shoulders', 'knees']; let lyrics = ['head', parts, 'and', 'toes']; // ["head", ["shoulders", "knees"], "and", "toes"]En su lugar, obtendría la matriz.
Si tomas una matriz
[{name: 'story1'}, {name: 'story2'}]y colóquelo en su otra matriz, obtiene:
setStories((stories) => [...stories, newStories]); [[{name: 'story1'}, {name: 'story2'}]]si lo vuelves a hacer obtienes:
setStories((stories) => [...stories, newStories]); [[{name: 'story1'}, {name: 'story2'}],[{name: 'story1'}, {name: 'story2'}]]Porque solo está colocando la matriz en su otra matriz.
Si desea eliminar los objetos de su matriz, debe spread el objeto en su estado.
setStories((prevstate) => [...prevstate, ...newStories]);entonces obtienes:
[{},{},{},{}]porque al esparcir estás sacando los objetos de la matriz en la que se encuentran actualmente.
Como nota al margen, no recomendaría nombrar el parámetro de su función de devolución de llamada con el mismo nombre que su estado, se vuelve confuso en cuanto a lo que realmente está haciendo referencia. He visto prevstate o, en su caso, algunos escribirían prevStories etc. Solo una recomendación.
Necesitas esparcir ambas matrices para hacer una nueva matriz
const story1 = [{a: 1}, {b: 2}] const story2 = [{c: 3}, {d: 4}] const newStories = [...story1, ...story2]; console.log(newStories); En cambio, si lo usa solo para una matriz, crearía una submatriz dentro de newArray
const story1 = [{a: 1}, {b: 2}] const story2 = [{c: 3}, {d: 4}] const newStories = [story1, ...story2]; console.log(newStories); const a = [{a: 1}, {b: 2}] const b = [{c: 3}, {d: 4}] const c = [ ...a, ...b ] const d = [ a, b ] const e = [ ...a, b ] const f = [ a, ...b ] console.log(c) console.log(d) console.log(e) console.log(f)