时间戳

首页 > 解决方案 > 如何使用easy-peasy在初始化时从商店显示我的列表？

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

问题描述

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

这是我的模型：

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 ，但没有任何结果。请问你能帮帮我吗 ？

标签： javascriptreactjsdomstoreeasy-peasy

解决方案

  1. 这不是一个放置的好位置console.log，要么将它放在组件渲染之外，要么放在地图内，要么放在 useEffect 上。
  2. 您可以通过使用 useEffect 并传递churches数组来实现它。
  useEffect(() => {
   // this will log everytime churches changes / initialized churches
   console.log(churches);
  }, [churches]);

推荐阅读