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

Posted 2023-02-22

【中文标题】无法使用 ReactJs、Axios、Redux 渲染/显示从 api 获取的数据

【英文标题】：Can not render/display the fetched data from an api using, ReactJs, Axios, Redux

【发布时间】：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=""  />
          </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

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

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

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