Question

我有这样的js代码：

let idCounter = 0;

export default class TestComponent extends Component {
  constructor(props) {
    super(props);

    this.uniqueId = `TestComponent-${idCounter++}`;
  }

  render() {
     return (<div id={this.uniqueId> Some content </div>);
  }
}

我需要为每个呈现的元素都具有唯一的ID，因此我对它们进行计数。但是我对Next.js有SSR。当页面在服务器上初始化时，由于服务器呈现，idCounter会增加几次。

然后，普通的浏览器尝试渲染此组件，从0开始的idCounter并替换服务器端渲染的ID（例如，将“ TestComponent-5”替换为“ TestComponent-0”）。我最终在控制台中出错：

“警告：属性id不匹配。服务器：“ TestComponent-5”客户端： “ TestComponent-0”“

我不知道该如何处理。有什么想法吗？

Answer 1

我看到这个问题已经很老了，但是无论如何，我整天都在努力解决这个问题，直到找到解决方案为止。而且似乎没有很多信息。

有一个名为react-uid的库，它对SSR友好。您只需要将应用程序包装在UIDReset中，并在组件中使用UIDConsumer提供的唯一ID

/pages/index.tsx：

import { UIDConsumer } from 'react-uid'

...
const Index = () => {
  return (
    <>
      <UIDReset prefix="uid_">
        <Layout>
          <Head>
            <title>Next.js App</title>
          </Head>
          <MyComponent />
        </Layout>
      </UIDReset>
    </>
  )

/components/MyComponent.tsx

import { UIDConsumer } from 'react-uid'
...

return(
  <UIDConsumer>
    {(id) => (
      (<div id={id}> Some content </div>);
    )}
  </UIDConsumer>
)

希望仍然会有帮助。

使用React和SSR递增元素ID（next.js）

1 个答案: