React sugiere no mutar el estado. Tengo una serie de objetos que estoy manipulando en función de algunos eventos. Mi pregunta es, ¿está bien escribirlo así?
const makeCopy = (arr) => arr.map((item) => ({ ...item })); function SomeComponenet() { const [filters, setFilters] = useState(aemFilterData); const handleFilterClick = (filter, c) => { let copiedFilters = makeCopy(filters); /** * Apply toggle on the parent as well */ if (!("parentId" in filter)) { copiedFilters[filter.id].open = !copiedFilters[filter.id].open; } setFilters(copiedFilters); } }¿Estoy mutando el objeto original haciendo lo mismo que arriba? ¿O hace una diferencia si se escribe así:
const makeCopy = (arr) => arr.map((item) => ({ ...item })); function SomeComponent() { const [filters, setFilters] = useState(aemFilterData); const handleFilterClick = (filter, c) => { let copiedFilters = makeCopy(filters); /** * Apply toggle on the parent as well */ if (!("parentId" in filter)) { copiedFilters = copiedFilters.map((f) => { if (filter.id === f.id) { return { ...f, open: !f.open, }; } else { return { ...f }; } }); } setFilters(copiedFilters); } }¿Cuál es la forma preferida de hacer esto? Los operadores de propagación se están volviendo muy detallados y no me gusta, pero lo prefiero si así es como necesito hacerlo aquí. immutable.js y sumergir o no una opción en este momento.
const makeCopy = (arr) => arr.map((item) => item );Con el código anterior, está mutando en la referencia del objeto original porque no estamos creando un clon profundo.
copiedFilters[filter.id].open = !copiedFilters[filter.id].open; Aquí la referencia de copiedFilters[filter.id] y filters[filter.id] es la misma.
Con operador de propagación
const makeCopy = (arr) => arr.map((item) => ({ ...item })); Aquí también creamos una nueva copia del objeto interno. Por lo tanto copiedFilters[filter.id] y filters[filter.id] tendrán una referencia diferente.
Esto es lo mismo que su segundo enfoque.
Entonces, o usa el operador de distribución mientras hace una copia o puede omitir hacer una copia en el segundo enfoque y mapear directamente en los filters ya que está usando el operador de distribución allí. Esto se ve mejor porque, ¿por qué ejecutar el bucle dos veces? Primero para crear una copia y luego para actualizar open .
// let copiedFilters = makeCopy(filters); Not needed in second approach copiedFilters = copiedFilters.map((f) => { if (filter.id === f.id) { return { ...f, open: !f.open, }; } else { return { ...f }; } });Puede crear un clon profundo cuando copia, pero eso sería un desperdicio de cómputo y memoria, no creo que sea necesario aquí. La clonación profunda es útil cuando tiene más anidamientos en el objeto.