Es una aplicación next.js y relleno los datos usando un gancho useSWR .
const { data, error } = useSWR('/api/digest', fetcher, { revalidateOnFocus: false, }) El problema es que el DOM no se actualiza como se esperaba después de la línea mutate() a continuación. Pero si updatedData los datos como datos actualizados y los paso como argumento para la mutación, funciona normalmente. El hecho es que data y los datos updatedData son lo mismo. Vea los comentarios a continuación.
Editar: si hago clic en cualquier barra de navegación <Link/> , se actualiza.
¿Alguna pista de lo que está pasando?
const handleAddRowClick = async () => { const newRow = { category: selectedCategory, entity: selectedEntity } data.subscription[selectedCategory].push(selectedEntity); console.log(data); // This data is equal to updatedData const updatedData = { "subscription": { "materialFact": [ "Boeing" ], "headlines": [ "thejournal", "onemagazine" // ***This is the value added. ] } } // mutate('/api/digest', data, false) // This does not works. mutate('/api/digest', updatedData , false) // It works. }Supongo que la propiedad data que usa en handleAddRowClick es la misma que obtiene de useSWR . Ahora, si actualiza algún objeto profundamente anidado en data , no cambia la referencia de datos. Todavía apunta al objeto antiguo. Entonces, si lo vuelve a pasar a mutate , para mutate, el objeto sigue siendo el mismo y, por lo tanto, no activará una nueva representación.
Le recomendaría que hiciera algo como lo siguiente para derivar datos updatedData de data y luego pasarlos a la función de mutate .
const handleAddRowClick = async () => { const updatedData = { ...data, subscription: { ...data.subscription, [selectedCategory]: [ ...data.subscription[selectedCategory], selectedEntity, ] } } mutate('/api/digest', updatedData , false); }En una nota al margen, también puede usar algo como immer para simplificar la copia del estado.