next.js 在修改数据后执行Mutate时,它不会检索新数据

unhi4e5o  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(118)

我正在使用一个前端组件来处理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 });
    }
}

zf9nrax1

zf9nrax11#

最后,我发现了这个问题:根据NEXTJS 13文档,“当使用GET方法和Response对象时,默认情况下路由处理程序是静态评估的”,以及后来的“路由处理程序在以下情况下是动态评估的:使用带有GET方法的Request对象”等。因此,记住NEXTJS 13的最后一个前提,我通过使用Request对象对API进行简单更改来解决这个问题。附件是后端API的更改。

const mongoose = require('mongoose');
import { NextResponse } from 'next/server'

import { EstadoAdministrativo } from '@/models/estados';
//import { NextResponse } from 'next/server'

export async function GET(request) {
    const { searchParams } = new URL(request.url)
    try {
        const estados = await EstadoAdministrativo.find({})

        return NextResponse.json({ estados, status: 200 });
    } catch (error) {
        console.error(error);
        return NextResponse.json(
            { error: "Fallo al cargar estados" },
            { status: 401 }
        );
    }
}

字符串

相关问题