Nextjs получает неожиданный запрос объекта в виде строки «[Object object]» в getServerSideProps

#javascript #reactjs #typescript #redux #next.js

#javascript #reactjs #typescript #redux #next.js

Вопрос:

TLDR:

   query: { token: '[object Object]' },
  params: { token: '[object Object]' }
  

Моя папка pages имеет такую структуру

  ---catalog
|   |   index.tsx
|   |   products.tsx
|   |
|   ---[slug]
|           index.tsx
|           products.tsx
|
  

Проблема в том, что при посещении я http://localhost:3000/catalog/products getServerSideProps получаю запрос

 {
   slug: "[Object object]"
}
  

Да, строка, а не объект, но это должен быть пустой объект, и это было, это работало, и это действительно сводило меня с ума, я действительно не касался кода nextjs, но вот /catalog/products

 import Page from './[slug]/products';
export { getServerSideProps } from './[slug]/products';
export default Page;
  

и вот /[slug]/products/

 // react
import React from 'react';
// application
import getShopPageData from '~/store/shop/shopHelpers';
import ShopPageShop from '~/components/shop/ShopPageShop';
import { wrapper } from '~/store/store';

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
    await getShopPageData(context);
});

function Page() {
    return (
        <ShopPageShop
            layout="grid"
            gridLayout="grid-4-sidebar"
            sidebarPosition="start"
        />
    );
}

export default Page;
  

вот оболочка

 import { createWrapper, MakeStore } from 'next-redux-wrapper';

export const wrapper = createWrapper<IRootState>(makeStore);
  

context.query / context.params оба получают объект со строками, когда я посещаю упомянутый мной URL-адрес, пуля «[Object Object]» переходит к методу, который получает продукт с помощью пули, что вызывает проблемы.

Ответ №1:

Попробуйте изменить [slug] на […slug] .

Комментарии:

1. Я только сопоставляю catalog/<slug>/products/

Ответ №2:

2 месяца поиска, это самая глупая проблема за всю историю, попробовал chrome amp; edge, и что-то было не так, я выяснил, что есть (я думаю) расширение chrome, которое пропустило это, все работает, и код правильный, я еще не понял, правильно ли этоя просто использовал firefox для проверки своей теории, и это сработало.

Вот что произошло:

  • Используйте chrome, 2 запроса выполняются к одной и той же конечной точке, первый получает правильный ответ, второй получает «[object Object]»
  • Используйте FF или что-то еще, 1 запрос выполняется успешно

У Chrome здесь более 15 расширений, я отключил все и протестировал, все еще не работает, я оставлю chrome на некоторое время, пока не узнаю причину.

Комментарии:

1. У меня была похожая проблема, и я обнаружил, что я делал <img src={ запрос типа ${ImageUrl} } /> , но imageUrl возвращался как объект вместо строки, что приводило к его запросу [object Object] с сервера. Может быть полезно для будущих пользователей Google проверить, какой запрос отправляется [object Object] , и начать поиск там.