Блог

Главная - Вопросы по программированию - Реагировать: Передача реквизитов автоматически сгенерированным потомкам с помощью useQuery

Реагировать: Передача реквизитов автоматически сгенерированным потомкам с помощью useQuery

#javascript #reactjs

Вопрос:

Я создаю приложение, которое генерирует звезды, а также планеты для этих звезд. В главном меню пользователи могут нажать на звездочку и развернуть ее в своем собственном компоненте. Существует много разных типов, поэтому важно, чтобы это был правильный тип звезды. Я добиваюсь этого с помощью этого кода:

 function useQuery() {
  return new URLSearchParams(useLocation().search);
}

 const query = useQuery();
  const starType = query.get("starType");
  const starName = query.get("name");

Таким образом, я могу визуализировать div <div className={starType}></div>{" "} и сделать его таким же, как тот, на который нажал пользователь. И мои звезды делаются такими:

             <Star
            name={`${makeStarName()}`}
            starType={`${starList[Math.floor(Math.random() * 6   1)]} ${
              positionList[Math.floor(Math.random() * 9   1)]
            }`}
          ></Star>

Теперь я пытаюсь сделать то же самое с планетами, вращающимися вокруг звезд. Мои планеты делаются такими:

            <MiniPlanet
            planetName={`${makePlanetName()}`}
            label={``}
            planetType={`${planetTypes[randomPlanetIndex()]} 
           `}
          >
            {" "}
          </MiniPlanet>

И я использую тот же запрос, чтобы получить реквизиты для планет:

 function useQuery() {
  return new URLSearchParams(useLocation().search);
  
}
useEffect(() => {
  console.log(planetType, planetName)
})
const query = useQuery();
const planetType = query.get("planetType");
  const planetName = query.get("name");

однако независимо от того, как я это делаю, он возвращается как null . Как я могу решить эту проблему? Мой полный код находится на GitHub здесь, и у меня есть кодовое поле здесь.

Метки: