對象在 _document.tsx [Next.js] 中作為 React 子錯誤無效

Question

當我嘗試使用以下代碼訪問頁面時：

export const getStaticProps = async (context: any) => {
    const res = await fetch(
        `https://pokeapi.co/api/v2/move/${context.params.move}`
    );
    const move = await res.json();

    return {
        props: {
            move,
        },
    };
};

export const getStaticPaths = async () => {
    const res = await fetch(`https://pokeapi.co/api/v2/move?limit=843`);
    const moves = await res.json();

    const movenames = moves.results.map((obj: any) => obj.name);

    const paths = movenames.map((movename: string) => ({
        params: {
            move: movename,
        },
    }));

    return { paths, fallback: false };
};

我在_document.tsx文件中遇到錯誤。 我沒有自定義的一組，所以錯誤在默認的_document.tsx文件中。

這是我得到的錯誤：錯誤圖像

Error: Objects are not valid as a React child (found: object with keys {name, url}). If you meant to render a collection of children, use an array instead.

../../pages/_document.tsx (89:33) @ Function.getInitialProps

  87 |     }
  88 | 
> 89 |     const { html, head } = await ctx.renderPage({ enhanceApp })
     |                                 ^
  90 |     const styles = [...flush()]
  91 |     return { html, head, styles }
  92 |   }

我花了最后一個小時嘗試調試和尋找解決方案，但我找不到其他人遇到同樣的問題。

Answer 1

我找到了答案。 與錯誤消息相反，這是因為我不小心嘗試在我的 JSX 中渲染 object。 我把obj.type而不是obj.type.name 。 哎呀。