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

brtdzjyr 于 2023-05-17 发布在 React

关注(0)|答案(2)|浏览(197)

我正在使用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。

next.js

来源：https://stackoverflow.com/questions/62940927/cant-use-replaceall-or-replace-with-nextjs-reactjs

2条答案

按热度按时间

92dk7w1h1#

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

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

赞(0）回复(0）举报 2023-05-17

mw3dktmi2#

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

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

1.安装core-js：npm --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。

赞(0）回复(0）举报 2023-05-17

我来回答

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

2条答案

相关问题

热门标签

最新问答