Estoy construyendo una aplicación del sistema solar que genera estrellas automáticamente. Mis star son un componente React que acepta un par de accesorios. Cuando el usuario hace clic en la estrella, necesito que se actualice el estado del system y también quiero que el navlink de navegación apunte al mismo valor.
let randomTypeVariable = starList[Math.floor(Math.random() * 6 + 1)]; return ( <NavLink to={`/${randomTypeVariable}`} onClick={() => props.setSystem(`${randomTypeVariable}`)} className="starWrapper" > Sin embargo, por el momento to= prop y la función onClick están dando resultados diferentes. Sé que esto se debe a que randomTypeVariable se ejecuta cada vez y da resultados diferentes.
Estos componentes se generan aleatoriamente, por lo que no puedo hacer que la variable sea un valor constante. ¿Cómo puedo asignar ambas propiedades para que sean la misma variable generada aleatoriamente?
Para el contexto, aquí está el componente star completo.
let randomTypeVariable = starList[Math.floor(Math.random() * 6 + 1)]; const makeStars = (Count = 5) => { if (Count > 0) { return ( <NavLink to={`/${randomTypeVariable}`} onClick={() => props.setSystem(`${randomTypeVariable}`)} className="starWrapper" > <Star starName={`${makeStarName()}`} starPosition={positionList[Math.floor(Math.random() * 9 + 1)]} starType={`${starList[Math.floor(Math.random() * 6 + 2)]}`} ></Star> {makeStars(Count - 1)} </NavLink> ); } };No debería dar un resultado diferente ya que randomTypeVariable no es una función, también probé esto.
Tal vez me estoy perdiendo algo, pero aun así useMemo puede resolver su problema
const makeStars = (Count = 5) => { let randomTypeVariable = useMemo(() => starList[Math.floor(Math.random() * 6 + 1)], []); if (Count > 0) { return ( <NavLink to={`/${randomTypeVariable}`} onClick={() => props.setSystem(`${randomTypeVariable}`)} className="starWrapper" > <Star starName={`${makeStarName()}`} starPosition={positionList[Math.floor(Math.random() * 9 + 1)]} starType={`${starList[Math.floor(Math.random() * 6 + 2)]}`} ></Star> {makeStars(Count - 1)} </NavLink> ); } };Así que no pude resolver esto tanto como evitarlo. Lo primero que hice fue quitar el onClick de mi componente
let randomTypeVariable = starList[Math.floor(Math.random() * 6 + 1)]; if (Count > 0) { return ( <NavLink to={`/${randomTypeVariable}`} className="starWrapper" > <Star starName={`${makeStarName()}`} starPosition={positionList[Math.floor(Math.random() * 9 + 1)]} starType={`${randomTypeVariable}`} ></Star> {makeStars(Count - 1)} </NavLink> Y teniendo en cuenta que aún podía usar la ruta de navegación de to={/${randomTypeVariable}} , pude recopilar la información que necesitaba de la URL de la página en lugar del estado.
let url = window.location.href let modifiedUrl = url.split('/') props.setSystem(modifiedUrl[3])Por fin, los componentes generados aleatoriamente son consistentes. Sin embargo, esto es más una forma de evitar el problema que de resolverlo. Si alguien tiene una solución real, deje que su voz se escuche aquí.