无法使用replaceAll或替换为nextjs/reactjs

brtdzjyr  于 2023-05-17  发布在  React
关注(0)|答案(2)|浏览(198)

我正在使用reactjs/nextjs,我目前正在尝试渲染这个组件:

const Example = ({data}) => (
<strong>{() => data.slug.replaceAll("-", " ")}</strong>);

我每次都会得到这个错误:
TypeError: data.slug.replaceAll is not a function .
子弹的类型是一个字符串,我检查了出来。
我试着使用我在另一个stackoverflow答案中找到的data.slug.toString().replaceAll...,但我遇到了同样的问题。
我尝试使用一个函数istead的直接字符串ie。:() => data.slug.replaceAll...,这次没有渲染。
我不知道这是否有帮助,但我试图通过getServerSideProps函数异步呈现的数据来自API。

92dk7w1h

92dk7w1h1#

很可能是因为.replaceAll()还没有在所有浏览器中得到支持。
卡纽斯
目前,您可以使用简单的.replace()

data.slug.replace(/-/g, " ")
mw3dktmi

mw3dktmi2#

随着Node.js 14的弃用,现在想要使用replaceAll的情况将变得更加普遍,但Chrome直到2020年8月的85版才开始支持这一点。即使对于较旧的浏览器,中断Next.js应用程序似乎也是一个坏主意,特别是考虑到replaceAll的低附加值。但是能够使用最新的JavaScript功能而不用担心兼容性也很好。这就是下面的修复可以派上用场的地方:
1.在Webpack配置中添加顶级-await

config.experiments = { ...config.experiments, topLevelAwait: true }

1.安装core-jsnpm --save-dev i core-js
1.在_app文件中添加一个不会增加基本包大小的条件动态导入:

if (typeof window !== 'undefined' && !String.prototype.replaceAll) {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  await import('core-js/actual/string/replace-all')
}

此修复也可用于任何非nextjs原生支持的polyfill。

相关问题