如何使用easy-peasy在初始化时从商店显示我的列表？

Posted 2023-03-16

【中文标题】如何使用easy-peasy在初始化时从商店显示我的列表？

【英文标题】：how to display my list from store at initialization with easy-peasy?

【发布时间】：2021-10-23 14:36:57

【问题描述】：

我想在初始化时从商店中获取教堂列表，但我做不到。日志获取我的初始数组和新数组，但不显示。日志如下： log

这是我的模型：

const churchModel = 
  items: [],

  // ACTIONS

  setAllChurches: action((state, payload) => 
    state.items = payload;
  ),
  getInitialChurches: thunk(async (actions) => 
    const  data  = await axios.post(
      'http://localhost:3000/api/geo/closeto?latlong=2.3522219 48.856614&distance=10000'
    );
    let array = [];
    const resData = data.map(async (index) => 
      const res = await axios.get(`http://localhost:3000/api/institutions/all?idInstitution=$index.idInstitution`);
      array.push(res.data[0]);
    );
    actions.setAllChurches(array);
  )

和我的组件：

const ChurchList = () => 
  const classes = useStyles();
  const setInitialChurches = useStoreActions(action => action.churches.getInitialChurches);
  const churches = useStoreState(state => state.churches.items);
  const [activeItem, setActiveItem] = React.useState(null);

  useEffect(() => 
   setInitialChurches()
  , []);

  return (
   <div className=classes.root style=marginTop: '20px',>
     churches.map( (church) => (
      <ChurchItem 
        key= church.idInstitution  
        church= church 
        setActiveItem=setActiveItem
        activeItem=activeItem
      />)
    ), console.log(churches)
   </div>
  )
;

export default ChurchList;

我尝试了一个 useEffect 但没有任何结果。你能帮我吗？

【问题讨论】：

分享ChurchItem 代码。另外，您在提取数据之前是否尝试过JSON.parse？给定的 llog 图像是否与churches.map 中的 console.log(curches) 相关？如果是，请尝试return ChurchItem...

【参考方案1】：

这不是放置 console.log 的好位置，要么将其放在组件渲染之外、地图内或 useEffect 上。 您可以通过使用 useEffect 并在数组上传递 churches 来实现。

  useEffect(() => 
   // this will log everytime churches changes / initialized churches
   console.log(churches);
  , [churches]);

【讨论】：

对不起，它不起作用，我不明白为什么

教会的价值会改变吗？