javascript - Next.js - 匿名箭头函数导致快速刷新不保留本地组件状态（警告）

Question

我目前遇到指向配置文件中未命名对象的警告，并且命名它并不能解决警告。以下是详细的警告和示例。

警告：

Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

前：

export const = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL as string,
  commitRef: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF as string,
  ldSdkKey: process.env.NEXT_PUBLIC_LD_SDK_KEY as string,
  imgixBaseUrl: process.env.NEXT_PUBLIC_IMGIX_BASE_URL as string,
  imgixApiKey: process.env.NEXT_PUBLIC_IMGIX_API_KEY as string,
  imgixResourceID: process.env.NEXT_PUBLIC_IMGIX_RESOURCE_ID as string,
};

尝试的解决方案 ./src/config.ts：

const AppConfig = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL as string,
  commitRef: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF as string,
  ldSdkKey: process.env.NEXT_PUBLIC_LD_SDK_KEY as string,
  imgixBaseUrl: process.env.NEXT_PUBLIC_IMGIX_BASE_URL as string,
  imgixApiKey: process.env.NEXT_PUBLIC_IMGIX_API_KEY as string,
  imgixResourceID: process.env.NEXT_PUBLIC_IMGIX_RESOURCE_ID as string,
};

export default AppConfig;

希望其他人经历过这种情况并找到解决方案。

Answer 1

原来问题是我们的旧版本 Next.js 没有指出警告的正确原因，但仍然发出警告。下一步更新引导我找到问题代码，我能够解决它。