Блог

именно здесь все и происходит

       const Home = () => {
          //FETCHING THE INFORAMATION
          const dispatch = useDispatch();
          useEffect(() => {
            dispatch(fetchHeroes());
          }, [Home]);
          //PULLING THE DATA OR EXTRACTING IT FROM THE STATE
          const { heroesInfo, heroName, heroType, attackType, mostPicked } =
            useSelector((state) => state.HeroesInfoAll);
          console.log(heroesInfo);
          return (
            <div>
              <HeroList>
                {heroesInfo.map((heroes) => {
                  <Heroes />;
                })}
              </HeroList>
            </div>
          );
        };

 

Я также изучаю Redux. У меня есть редуктор, в котором есть эти массивы, в которых я хочу передать значения соответственно на данный момент, хотя я передаю значение только в массив «heroesInfo»

 
    const initState = {
      heroesInfo: [],
      heroName: [],
      heroType: [],
      attackType: [],
      mostPicked: [],
    };
    
    const HInfoReducer = (state = initState, action) => {
      switch (action.type) {
        case "FETCH_HEROES":
          return { ...state, heroesInfo: action.payload.heroesInfo };
        default:
          return { ...state };
      }
    };
    
    
    export default HInfoReducer;

 

Это компонент Heroes, который я хочу отобразить для каждого значения данных, находящегося в состоянии, которое вы можете увидеть в первом фрагменте кода

 
    const Heroes = () => {
      return (
        <>
          <h1>Hero Name</h1>
          <div className="hero-image">
            <img src="" alt="Hero Image" />
          </div>
          <h2>Hero Type</h2>
          <h2></h2>
        </>
      );
    };
    export default Heroes;

 

Я также консольно вывел некоторые результаты, чтобы подтвердить, присутствовали ли данные в состоянии или нет. Установил инструменты Redux, чтобы проверить это, а вот результат

 
[this image shows that the data was extracted for sure after the FETCH_HEROES action ran][1]
[Here I console logged out the heroesInfo array which has the data which I want in it however on the left side my screen is completely blank. I expect it to render out my component for each element present inside of the array][2]


  [1]: https://i.stack.imgur.com/nRqZr.png
  [2]: https://i.stack.imgur.com/CZbHn.png


 

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