无法使用 ReactJs、Axios、Redux 渲染/显示从 api 获取的数据答案

【问题标题】：Can not render/display the fetched data from an api using, ReactJs, Axios, Redux无法使用 ReactJs、Axios、Redux 渲染/显示从 api 获取的数据
【发布时间】：2021-09-09 15:20:48
【问题描述】：

这是所有事情发生的地方

      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 组件，我想为您在第一个代码 sn-p 中看到的状态中存在的每个数据值渲染它


    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

希望这次不要被封号，我真的不知道怎么提问，但我只想知道为什么组件没有被渲染出来，即使数据存在于他们的?

【问题讨论】：

标签： reactjs api redux axios

【解决方案1】：

如果组件返回正确的数据，请检查 HeroList 组件。

【讨论】：

HeroList 实际上只是一个 styled.div 组件，因此它具有我想要使用的 css 属性，没有什么不寻常的:(

【解决方案2】：

我重写了代码，现在可以获取数据，但是我有一个新问题，我很快就会问。

【讨论】：