[ Day 29 ] 实作一个 React.js 网站 5/5

今天是实作 React.js 网站的最後一篇介绍了，这篇会大量的使用到 React Hooks 的功能所以赶快一起来看该怎麽应用吧！

新增 Meetup 後重新导向

上篇的最後一个示范我们新增了 POST Request 至我们的 NewMeetup.js 页面中，不过画面并没有出现任何提示成功新增的通知又或是页面重新导向的处理。因此我们在这边使用 React Router 内提供的 useHistory 这个 Hooks 来重新导向画面到 AllMeetup.js 中。

备注： useHistory 这个 react-router 所提供的 hooks 方法并没有在前面的章节出现过，因此附上一个文章介绍的传送门给大家参考一下唷！

在 AllMeetup.js 的页面中使用 fetch 来取得 Firebase 资料库的内容，并将原本预设的 DUMMY_DATA 移除。
引用 useState 的方法後使用该 React Hook 来宣告变数储存 Meetup 资料，并设定初始值。
将 setIsLoading 这个修改 State 的方法用在取得资料的 then 当中， setLoadedMeetups 也一样设定在该处，并将前面宣告好的变数 isLoading 和 loadedMeetups 应用在判定目前是某有新增的资料内容。

上述使用 useState 的 Hooks 之後会造成**无限回圈（ Infinite Loop ）**的状况发生，为了解决这个问题我们使用了 useEffect 并且在该 Hooks 当中添加了第二个参数：空阵列来做处理。
另外将原本的 data 物件整理成新的阵列 meetups 并将资料传入，因为在 MeetupList.js 元件当中有使用到了阵列的处理方法 map ，所以必须将原本的物件改成阵列才不会出现错误讯息。

可以看一下目前的页面内容，就能看到目前我们上次新增到 Firebase 中的 Meetup 资料了：

备注：关於使用 useEffect 造成的无限回圈的原因和解法，可以参考这篇文章内的详细介绍唷。

在 src 资料夹中新增 store 资料夹，在其中新增一个 favorites-context.js 的档案并引入 createContext 这个 React.js 的功能。
宣告一个 FavoritesContext 变数并使用 creactContext 来存放需要的变数，在此 Context 物件中使用 Provider 属性做设定来传递资料到子层的元件中，再搭配 useState 宣告 userFavorites 一个变数来储存我的最爱。
新增 addFavoriteHandler() 、 removeFavoriteHandler() 和 itemIsFavoriteHandler() 等三个 Function 来做我的最爱的新增、删除和判断该 Meetup 是否为我的最爱。
在刚才新增的三个 Function 中分别使用阵列的方法： concat() 、 filter() 和 some() 来处理资料，并将设定好的三个 Function 一起加入 context 以及 FavoritesContext 变数中。最後将此 FavoritesContextProvider 这个 Function export ，以及在此档案中最下方将其汇出。
在 index.js 中引入 FavoritesContextProvider 这个 Function ，并将其加在 ReactDOM 的函式中。
来到 MeetupItem.js 元件处理新增或移除 Meetup 资料，在档案中引用 useContext 这个 Hooks 来处理，并在其中绑定点击 To Favorites 按钮的事件，在新增至 Favorites.js 页面中。