大家好，我遵循了下一个教程https://nextjs.org/docs/advanced-features/dynamic-import并且对components非常有效
但是我需要动态地获取数据。情境:
我有一个名为MyItems的简单组件，它接收作为道具items，这是一个元素列表标题，类别。
我想从存储在page-data/myitems/de|en中的typescript文件中动态导入这些列表。t等等
所以这些ts文件在做一些计算后导出数组，这就是为什么我不动态导入json或搜索其他解决方案。我需要他们有代码和导出数组export default [{name: 'somename', title: somemagic()]
我有这个页面在pages/page
const Page = async ({ t, ...props }: Props) => {
const locale = props._nextI18Next.initialLocale;
const items = (await import(`../page-data/myitems/${locale}`)).default;
console.log(items); // HERE I SEE OUTPUT FINE
return (
<>
<Head>
<title>dynamic test</title>
</Head>
{/*@ts-ignore*/}
<MyPage items={items} />
</>
);
};
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
这一切都很好，所以我的问题是我该如何解决这种情况呢?
目标仍然是相同的(项目现在被提取，但组件返回作为承诺由于异步和其他的反应魔术失败)
我已经自己解决了这个问题，并将解决方案发布给面临相同问题的任何人。
所以总结你仍然可以动态导入一个react组件，但是这个"本地化"组件React组件依赖于公共页面。例如page-en。TSX导入页面。(见下文)
这将是你NextJs的主页:
import React from 'react';
import dynamic from 'next/dynamic';
const Page = ({ t, ...props }: Props) => {
const locale = props._nextI18Next.initialLocale;
const nt = scopedT(t, T_NAMESPACE);
const DynamicComponent = dynamic(() => import(`../page-data/mypage/${locale}`));
return (
<>
<Head>
<title>{nt('pageTitle')}</title>
</Head>
{/*@ts-ignore*/}
<DynamicComponent />
</>
);
};
这将是你的page-data/mypage/en|de|whateverlang.tsx
const En: React.FC = () => {
return <MyPage items={getItemsForLocale('en')} />;
};