Установка начальной кадры на анимации Lottie на основе темы LocalStorage в React ⇐ Javascript

[Anonymous]

У меня есть компонент React, который реализует переключатель Dark Mode, используя следующую анимацию Lottie:
https://lottiefiles.com/free-animation/ ... ax5xjzqdq8 brmaly , что имеет различные фреймы, которые имеют различные фрейсы, которые имеют различные фрейсы, которые могут быть в Manual Set-an-drack-tright, и nack-trighat Нажмите, однако мне также необходимо установить начальный кадр анимации Lottie на основе предпочтения темы пользователя, хранящегося в LocalStorage .
Проблема, которую я возникает, заключается в том, что Lottie всегда по умолчанию по умолчанию 0, что означает, что тема пользователя является темным режимом, лотти-дискретизация будет отображаться. PrettyPrint-Override ">

Код: Выделить всё

import React, { useEffect, useState, useRef } from "react";
import Lottie from "lottie-react";
import darkModeToggle from "./assets/dark-mode-lottie.json";

const DarkModeToggle = () => {
const initialTheme = localStorage.getItem("theme");
const [isDarkMode, setIsDarkMode] = useState(initialTheme === "dark");
const lottieRef = useRef(null);

useEffect(() => {
const root = document.documentElement;
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
const themeColor = isDarkMode ? "#000000" : "#f1f5f9";

if (isDarkMode) {
root.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
metaThemeColor.content = themeColor;
} else {
root.removeAttribute("data-theme");
localStorage.setItem("theme", "light");
metaThemeColor.content = themeColor;
}
}, [isDarkMode]);

const handleClick = () => {
if (lottieRef.current) {
if (isDarkMode) {
setIsDarkMode((prev) => !prev);
lottieRef.current?.playSegments([120, 150], true);
} else {
setIsDarkMode((prev) => !prev);
lottieRef.current?.playSegments([30, 50], true);
}
}
};

useEffect(() => {
if (lottieRef.current) {
const initialFrame = initialTheme === "dark" ? 30 : 0;
lottieRef.current?.goToAndStop(initialFrame, true);
}
}, []);

return (



);
};

export default DarkModeToggle;

Я пробовал несколько вещей, включая использование effect , чтобы установить начальный кадр на рендеринге на основе темы в соответствии с вышеупомянутым кодом, но это все еще заканчивается дефолтом анимации Lottie для кадров 0 каждый раз. Использование Lottie-react , потому что я использую метод PlaySegments для воспроизведения анимации анимации Lottie на клике, но я также пытался использовать React-Lottie , но безрезультатно.

Подробнее здесь: https://stackoverflow.com/questions/795 ... localstora