我正在使用一个前端组件来处理NEXTjs,该组件使用Estados组件呈现一个表,该组件的数据是通过调用后端的端点API/estados/administrativos/lista获得的。在该表中,可以进行更改,这些更改通过调用actualizarEstado函数保存在MongoDB数据库中,然后调用mutate以反映表中的更改。问题在于,在开发环境中,一切都按预期运行:加载数据,进行更改,并在表中反映这些更改;但是当切换到生产环境时,行为是不同的,更具体地说,更改被保存在数据库中,但是这些新数据没有反映在前端的表中。会有什么问题呢?最后,我提供了后端和前端代码。
前端代码:
'use client';
import React from 'react';
import useSWR, { mutate } from 'swr';
import Estados from '../_components/estados';
import axios from 'axios';
const EstadosAdministrativos = () => {
const fetcher = async () => {
const res = await fetch('/api/estados/administrativos/lista')
const data = await res.json()
console.log('cargo estados', data.estados)
return data.estados
};
const { data: estados, error } = useSWR('/api/estados/administrativos/lista', fetcher);
const actualizarEstado = async (data) => {
try {
const response = await axios.post('/api/estados/administrativos/upsert/', data);
mutate('/api/estados/administrativos/lista');
} catch (error) {
console.error(error);
}
};
return (
<div>
<h1>Configuración de los estados administrativos</h1>
{error && <p>Ocurrio un error...</p>}
{!estados ? (
<p>Cargando...</p>
) : (
<Estados estados={estados} actualizarEstado={actualizarEstado} />
)}
</div>
);
};
export default EstadosAdministrativos;
字符串
后端代码
const mongoose = require('mongoose');
import { EstadoAdministrativo } from '@/models/estados';
import { NextResponse } from 'next/server';
export const GET = async (request) => {
console.log('hola');
try {
const estados = await EstadoAdministrativo.find({});
console.log(estados);
return NextResponse.json({ estados });
} catch (error) {
NextResponse.json("Fallo al cargar estados administrativos", { status: 500 });
}
}
型
1条答案
按热度按时间zf9nrax11#
最后,我发现了这个问题:根据NEXTJS 13文档,“当使用GET方法和Response对象时,默认情况下路由处理程序是静态评估的”,以及后来的“路由处理程序在以下情况下是动态评估的:使用带有GET方法的Request对象”等。因此,记住NEXTJS 13的最后一个前提,我通过使用Request对象对API进行简单更改来解决这个问题。附件是后端API的更改。
字符串