Проблема с ssr
s-r-x opened this issue · 7 comments
Привет, спасибо за либу <3
на клиенте и сервере генерятся разные айдишники для aria-owns, вследствии чего появляется ошибка вида:
Prop `aria-owns` did not match. Server: "ATZZ5PwA-SCHKGkjw16vd" Client: "bb3fWbu5JqlldDXfxSeOL"
Было бы недурно добавить возможность прокидывать проп со своим уникальным id
что-то вроде того?
constructor(props: BaseProps<SuggestionType> & OwnProps) {
super(props);
this.uid = props.uid || nanoid();
}
Привет! Спасибо за сообщение!
Давно не работаю с классовыми компонентами и быстро не удалось найти другого решения. В функциональном можно было бы просто useRef
с начальным значением и всё.
Я тогда действительно пока что добавлю дополнительный пропс
@vitalybaev даже если бы компонент был функциональным от useRef все равно было бы немного толку)
наиболее простое и наименее подвержденное ошибкам решение было бы юзать useId, но это соответственно только react 18 и только fc.
чтобы не безобразничать в конструкторе и всегда быть в синхронизации с входящим пропом uid при его изменении я бы предложил создать внутри геттер для uid. как-то так:
class Component {
private _generatedUid = '';
private get uid(): string {
if(this.props.uid) return this.props.uid;
if(!this._generatedUid) this._generatedUid = nanoid();
return this._generatedUid;
}
}
Да, я уже реализовал способ через геттер и дописываю документацию.
Неужели useRef не помог? 🤔 Насколько я помню из своего опыта, начальное значение таких рефов прекрасно живут с регидратацией, как и обычный стейт.
@vitalybaev, useRef("petya") и useRef(1) - ок, а useRef(Math.random()) и useRef(nanoid()) - уже нет)
Выпущено в версии v2.18.0
. Спасибо за сообщение!
useRef("petya") и useRef(1) - ок, а useRef(Math.random()) и useRef(nanoid()) - уже нет)
Да, вы абсолютно правы. Лучшим решением сейчас вижу - обновляться на React 18 как только получится и использовать useId
и прокидывать его через новый пропс.
Вообще у меня давно уже есть планы по созданию новой мажорной версии, которая будет на хуках, более модульная, но всё как-то руки не доходят
@vitalybaev премного благодарен