Увеличение идентификатора элемента с реакцией и SSR (next.js)

У меня есть такой код 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>);
  }
}

Мне нужно иметь уникальный идентификатор для каждого отображаемого элемента, поэтому я считаю их. Но у меня есть SSR с Next.js. Когда страница инициализируется на сервере, idCounter увеличивается в несколько раз из-за рендеринга сервера.

Затем обычный браузер пытается выполнить рендеринг этого компонента, начиная idCounter с 0 и заменяя идентификатор на стороне сервера (например, "TestComponent-5" на "TestComponent-0"). И я в конечном итоге с ошибкой в ​​консоли:

Предупреждение: опора id не соответствует. Сервер: "TestComponent-5" Клиент: "TestComponent-0" "

Я не знаю, как справиться с этим. Есть идеи?

Источник

0 ответов

Я вижу, что вопрос уже довольно старый, но в любом случае я боролся с этой проблемой целый день, пока не нашел решение. И, похоже, информации об этом не так много.

Существует библиотека с именем response-uid, которая поддерживает SSR. Вам просто нужно обернуть свое приложение в UIDReset и использовать уникальные идентификаторы, предоставленные UIDConsumer в компонентах.

/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>
)

Надеюсь, что это все еще будет полезно.

Источник
Другие вопросы по тегам