Я пытаюсь создать истории, используя react-insta-stories
. Я использую свойство content
для отображения истории. Я пытаюсь изменить значение переменной внутри handleclick (). вот 2 ссылки: ссылка 1 ссылка 2 . Я пытаюсь показать / скрыть список пользователей, которые просмотрели историю по щелчку, изменив значение showViewers
. Я вижу, что компонент постоянно рендерится до тех пор, пока история не закончится. Проблема в том, что компонент не выполняет повторный рендеринг, когда я изменяю значение переменной showViewers
после завершения истории.
{
content: ({ action, isPaused }) => {
const handleClick = (e) => {
showViewers = !showViewers;
console.log(showViewers);
};
return (
<div onClick={handleClick} className={'story-wrap'}>
<img src={require('./img.png')} alt='' className={'story-img'}/>
{console.log(showViewers)} //logging value of variable
{showViewers ? (
<div className={'viewed-by-list-wrap'}>
{viewedBy.map((user, index) => (
<div className={'viewed-by-list-item'} key={index}>
<img src={user.avatar} alt='' />
<div className={'user-name'}>
<p>{user.name}</p>
<p>{user.time}</p>
</div>
</div>
))}
</div>
) : null}
<div className={'see-more'} onClick={() => handleClick}>Viewed</div>
</div>
);
},
header: {
heading: '_sudo_',
subheading: 'Posted 32m ago',
profileImage: require('./img.png') }
}
После завершения процесса и прекращения рендеринга компонента вызывается функция, и значение переменной изменяется, но вышеуказанный компонент не рендерится.
Я пытался сохранить showViwers
в состоянии компонента. Но затем прогресс истории обновляется с самого начала каждый раз, когда обновляется состояние.
Есть ли другие логи c для этой функции?