プログラミング100日チャレンジ記録 #100daysofcode

106日目②：debug成功！ユーザー(developers)のプロフィールを表示させる＆React Hooksのdebug修正

106日目②：debug成功！ユーザー(developers)のプロフィールを表示させる＆React Hooksのdebug修正

昨日のdebug修正を行い、登録したユーザー（developers)のプロフィールが表示されるようになりました。また、他ファイルにも間違いがあり、debugしました。

debugしていて気づいた一番大きな間違いは、ナビゲーションバーのファイル（Navbar.js)上で、テスト用に書いたコードをそのまま残してしまっていた（本来なら消さなければならない）ことです。昨日は何度かコードを見直したのですが、気づきませんでした。今日はすぐ気が付きましたので、やはり「疲れていない状態で見直す」ことがすごく大事なのかもしれません。

というわけで、プロフィールを表示させるためのコード（正しいもの）です。

①新フォルダに新ファイル作成してプロフィールが表示されるようにする　client/src/components/profiles/Profiles.js

componentsの中に新しいフォルダ「profiles」を作成して、新しいファイル、Profiles.jsを作成しました。

React HooksのuseEffectを使用して、ユーザーのプロフィールを表示できるようにコードを書きました。ローディング中はスピナーを表示、ローディングが終わったらDevelopersと表示されるようになっています。

useEffectの部分は、最後の[]部分は最初空欄だったのですが、それではエラー表示が出てしまうということで、[getProfiles]と修正しました。

  1. import React, { Fragment, useEffect } from "react";
  2. import PropTypes from "prop-types";
  3. import { connect } from "react-redux";
  4. import Spinner from "../layout/Spinner";
  5. import ProfileItem from "./ProfileItem";
  6. import { getProfiles } from "../../actions/profile";
  8. const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
  9. useEffect(() => {
  10. getProfiles();
  11. }, [getProfiles]);
  13. return (
  14. <Fragment>
  15. {loading ? (
  16. <Spinner />
  17. ) : (
  18. <Fragment>
  19. <h1 className='large text-primary'>Developers</h1>
  20. <p className='lead'>
  21. <i className='fab fa-connectdevelop' /> Browse and connect with
  22. developers
  23. </p>
  24. <div className='profiles'>
  25. {profiles.length > 0 ? (
  26. profiles.map(profile => (
  27. <ProfileItem key={profile._id} profile={profile} />
  28. ))
  29. ) : (
  30. <h4>No profiles found...</h4>
  31. )}
  32. </div>
  33. </Fragment>
  34. )}
  35. </Fragment>
  36. );
  37. };
  39. Profiles.propTypes = {
  40. getProfiles: PropTypes.func.isRequired,
  41. profile: PropTypes.object.isRequired
  42. };
  44. const mapStateToProps = state => ({
  45. profile: state.profile
  46. });
  48. export default connect(
  49. mapStateToProps,
  50. { getProfiles }
  51. )(Profiles);
import React, { Fragment, useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Spinner from "../layout/Spinner";
import ProfileItem from "./ProfileItem";
import { getProfiles } from "../../actions/profile";

const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
  useEffect(() => {
    getProfiles();
  }, [getProfiles]);

  return (
    <Fragment>
      {loading ? (
        <Spinner />
      ) : (
        <Fragment>
          <h1 className='large text-primary'>Developers</h1>
          <p className='lead'>
            <i className='fab fa-connectdevelop' /> Browse and connect with
            developers
          </p>
          <div className='profiles'>
            {profiles.length > 0 ? (
              profiles.map(profile => (
                <ProfileItem key={profile._id} profile={profile} />
              ))
            ) : (
              <h4>No profiles found...</h4>
            )}
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};

Profiles.propTypes = {
  getProfiles: PropTypes.func.isRequired,
  profile: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile
});

export default connect(
  mapStateToProps,
  { getProfiles }
)(Profiles);

 

②新しいファイルを作成して、プロフィールの詳細が表示されるようにするclient/src/components/profiles/ProfileItem.js

先程作成した「profiles」フォルダ内にProfileItem.jsというファイルを作成しました。そこで、プロフィール詳細である、ユーザーのID・名前・アバター、ステイタス（現在の状態）、会社、場所、スキルが表示されるようコーディングしました。

スキルは4つをMAXとするために、sliceとmapを使用しています。

  1. import React from "react";
  2. import { Link } from "react-router-dom";
  3. import PropTypes from "prop-types";
  5. const ProfileItem = ({
  6. profile: {
  7. user: { _id, name, avatar },
  8. status,
  9. company,
  10. location,
  11. skills
  12. }
  13. }) => {
  14. return (
  15. <div className='profile bg-light'>
  16. <img src={avatar} alt='' className='round-img' />
  17. <div>
  18. <h2>{name}</h2>
  19. <p>
  20. {status} {company && <span> at {company}</span>}
  21. </p>
  22. <p className='my-1'>{location && <span>{location}</span>}</p>
  23. <Link to={`/profile/${_id}`} className='btn btn-primary'>
  24. View Profile
  25. </Link>
  26. </div>
  27. <ul>
  28. {skills.slice(0, 4).map((skill, index) => (
  29. <li key={index} className='text-primary'>
  30. <i className='fas fa-check' /> {skill}
  31. </li>
  32. ))}
  33. </ul>
  34. </div>
  35. );
  36. };
  38. ProfileItem.propTypes = {
  39. profile: PropTypes.object.isRequired
  40. };
  42. export default ProfileItem;
import React from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";

const ProfileItem = ({
  profile: {
    user: { _id, name, avatar },
    status,
    company,
    location,
    skills
  }
}) => {
  return (
    <div className='profile bg-light'>
      <img src={avatar} alt='' className='round-img' />
      <div>
        <h2>{name}</h2>
        <p>
          {status} {company && <span> at {company}</span>}
        </p>
        <p className='my-1'>{location && <span>{location}</span>}</p>
        <Link to={`/profile/${_id}`} className='btn btn-primary'>
          View Profile
        </Link>
      </div>
      <ul>
        {skills.slice(0, 4).map((skill, index) => (
          <li key={index} className='text-primary'>
            <i className='fas fa-check' /> {skill}
          </li>
        ))}
      </ul>
    </div>
  );
};

ProfileItem.propTypes = {
  profile: PropTypes.object.isRequired
};

export default ProfileItem;

 

③App.jsに新しいファイル情報を書き加える

まず、import部分にprofilesフォルダのProfiles.jsの情報を書き加えました。

  1. import Profiles from "./components/profiles/Profiles";
import Profiles from "./components/profiles/Profiles";

const AppのSwitch内に新しいRouteを書き加えます。（profilesの一行のみ）

  1. const App = () => {
  2. useEffect(() => {
  3. store.dispatch(loadUser());
  4. }, []);
  6. return (
  7. <Provider store={store}>
  8. <Router>
  9. <Fragment>
  10. <Navbar />
  11. <Route exact path='/' component={Landing} />
  12. <section className='container'>
  13. <Alert />
  14. <Switch>
  15. <Route exact path='/register' component={Register} />
  16. <Route exact path='/login' component={Login} />
  17. <Route exact path='/profiles' component={Profiles} />
  18. <PrivateRoute exact path='/dashboard' component={Dashboard} />
  19. <PrivateRoute
  20. exact
  21. path='/create-profile'
  22. component={CreateProfile}
  23. />
  24. <PrivateRoute
  25. exact
  26. path='/edit-profile'
  27. component={EditProfile}
  28. />
  29. <PrivateRoute
  30. exact
  31. path='/add-experience'
  32. component={AddExperience}
  33. />
  34. <PrivateRoute
  35. exact
  36. path='/add-education'
  37. component={AddEducation}
  38. />
  39. </Switch>
  40. </section>
  41. </Fragment>
  42. </Router>
  43. </Provider>
  44. );
  45. };
const App = () => {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Navbar />
          <Route exact path='/' component={Landing} />
          <section className='container'>
            <Alert />
            <Switch>
              <Route exact path='/register' component={Register} />
              <Route exact path='/login' component={Login} />
              <Route exact path='/profiles' component={Profiles} />
              <PrivateRoute exact path='/dashboard' component={Dashboard} />
              <PrivateRoute
                exact
                path='/create-profile'
                component={CreateProfile}
              />
              <PrivateRoute
                exact
                path='/edit-profile'
                component={EditProfile}
              />
              <PrivateRoute
                exact
                path='/add-experience'
                component={AddExperience}
              />
              <PrivateRoute
                exact
                path='/add-education'
                component={AddEducation}
              />
            </Switch>
          </section>
        </Fragment>
      </Router>
    </Provider>
  );
};

 

④ナビゲーションバーにprofilesページへのリンクを書き加え、developersのプロフィール情報を表示できるようコードを書き加える（debugした部分）client/src/components/layout/Navbar.js

本日debugしていて気づいたのが、このファイルにテスト用に書いていたコードを消していなかったということです。

プロフィールのページへのリンクだけで良かったところ、/#!というテスト用ページへのリンクを消していなかったので、昨日おかしなことになっていました。正しいコードを書くことができて本日はスッキリです。

  1. import React, { Fragment } from "react";
  2. import { Link } from "react-router-dom";
  3. import { connect } from "react-redux";
  4. import PropTypes from "prop-types";
  5. import { logout } from "../../actions/auth";
  7. const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
  8. const authLinks = (
  9. <ul>
  10. <li>
  11. <Link to='/profiles'>Developers</Link>
  12. </li>
  13. <li>
  14. <Link to='/dashboard'>
  15. <i className='fas fa-user' />
  16. {""}
  17. <span ClassName='hide-sm'>Dashboard</span>
  18. </Link>
  19. </li>
  20. <li>
  21. <a onClick={logout} href='#!'>
  22. <i className='fas fa-sign-out-alt' />
  23. {""}
  24. <span ClassName='hide-sm'>Logout</span>
  25. </a>
  26. </li>
  27. </ul>
  28. );
  30. const guestLinks = (
  31. <ul>
  32. <li>
  33. <Link to='/profiles'>Developers</Link>
  34. </li>
  35. <li>
  36. <Link to='/register'>Register</Link>
  37. </li>
  38. <li>
  39. <Link to='/login'>Login</Link>
  40. </li>
  41. </ul>
  42. );
  44. return (
  45. <nav className='navbar bg-dark'>
  46. <h1>
  47. <Link to='/'>
  48. <i className='fas fa-code' /> DevConnector
  49. </Link>
  50. </h1>
  51. {!loading && (
  52. <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
  53. )}
  54. </nav>
  55. );
  56. };
  58. Navbar.propTypes = {
  59. logout: PropTypes.func.isRequired,
  60. auth: PropTypes.object.isRequired
  61. };
  63. const mapStateToProps = state => ({
  64. auth: state.auth
  65. });
  67. export default connect(
  68. mapStateToProps,
  69. { logout }
  70. )(Navbar);
import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { logout } from "../../actions/auth";

const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
  const authLinks = (
    <ul>
      <li>
        <Link to='/profiles'>Developers</Link>
      </li>
      <li>
        <Link to='/dashboard'>
          <i className='fas fa-user' />
          {""}
          <span ClassName='hide-sm'>Dashboard</span>
        </Link>
      </li>
      <li>
        <a onClick={logout} href='#!'>
          <i className='fas fa-sign-out-alt' />
          {""}
          <span ClassName='hide-sm'>Logout</span>
        </a>
      </li>
    </ul>
  );

  const guestLinks = (
    <ul>
      <li>
        <Link to='/profiles'>Developers</Link>
      </li>
      <li>
        <Link to='/register'>Register</Link>
      </li>
      <li>
        <Link to='/login'>Login</Link>
      </li>
    </ul>
  );

  return (
    <nav className='navbar bg-dark'>
      <h1>
        <Link to='/'>
          <i className='fas fa-code' /> DevConnector
        </Link>
      </h1>
      {!loading && (
        <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
      )}
    </nav>
  );
};

Navbar.propTypes = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(
  mapStateToProps,
  { logout }
)(Navbar);

これで、プロフィールのページに、登録したユーザー（developers=開発者）が並んで表示されるようになりました。今日になって新しい目でチェックしてみると意外とシンプルなミスでした。debugする時は疲れていない状態で何がおかしいのか考えると良いなと思いました。

⑤その他に気づいたミスをdebugした。import { Link } from "react-router-dom"を使用している時のリンクの飛ばし方を間違えている部分があったので修正

これはまた別ファイルの全く別件のミスなのですが、import { Link } from "react-router-dom";を使用している時は、<Link to="/リンク先ファイル名”></Link>としなければならないところ、aタグ（a href)で囲んだ時と同じようにリンク先を”http~.html"と書いてしまっていた箇所を発見しましたので、修正しました。

具体的には、AddExperience.jsというファイルのこの部分です。Go Backをクリックでダッシュボードに飛ぶようになっています。

  1. <Link className='btn btn-light my-1' to='/dashboard'>
  2. Go Back
  3. </Link>
<Link className='btn btn-light my-1' to='/dashboard'>
          Go Back
        </Link>

 

現在使用している教材と学習時間：本日の学習時間2.5時間（復習とdebugのみ）
Udemy：MERN Stack Front To Back: Full Stack React, Redux & Node.js by Brad Traversy

★Section10：Profile Display

-Lec 53 Finish Profile Actions & Reducer（前のブログ記事の内容）

-Lec54 Display Profiles (開発者=developersのプロフィールを表示するページの作成。昨日間違えた部分をdebugして修正。）

-Lec 55 Addressing The Console Warnings (ここまでの講座でエラーが出ている箇所を修正。React Hooksの修正含む。）

進捗状況：76％

学習時間2.5時間

★参考にした本★

「React.js & Next.js超入門」掌田津耶乃　（秀和システム）

Section4-1: Reduxを使ってみよう

この記事を書いた人
キョウコ
プログラミング（主にJavascript）の学習記録とお役立ち情報をシェアしています
最近書いた記事
Javascript React: CSS modulesとは？使い方について詳しく説明してあるサイトのリンクまとめ
Javascript/React/Redux
Javascript React: CSS modulesとは？使い方について詳しく説明してあるサイトのリンクまとめ
【重要ポイントあり】WordPressでads.txtファイルをエックスサーバーで設置する方法と注意点
SEO/ Google Adsense/ Webマーケティング
【重要ポイントあり】WordPressでads.txtファイルをエックスサーバーで設置する方法と注意点
Javascript:条件（三項）演算子とは何？定義・読み方・使い方まとめ（例文あり）: How to read and use The Conditiong (Ternary) Operator with Demo code
Javascript/React/Redux
Javascript:条件（三項）演算子とは何？定義・読み方・使い方まとめ（例文あり）: How to read and use The Conditiong (Ternary) Operator with Demo code
DOMとは何か？JavaScriptやhmtlとの違いとは？定義のまとめ
Javascript/React/Redux
DOMとは何か？JavaScriptやhmtlとの違いとは？定義のまとめ
関連キーワード
プログラミング100日チャレンジ記録 #100daysofcodeの関連記事
  • 131日目～134日目：Udemyで一番人気のGit (&GitHub) コースを修了！学習した内容・学習にかかった時間とおすすめ度をご紹介: Completed Git course by Udemy "Git Complete: The definitive, step-by-step guide to Git" by Jason Taylor: Highly recommended to both beginner & intermediate leaner
  • 121日目～130日目：Udemyで新しいReactコース学習とGit ＆ GitHubのコースを受講し始める #100dayofcode Round 2
  • 120日目：プログラミング学習100日チャレンジの完了とこれからの学習＆ブログ記事:100days of code completed & from now on
  • 119日目：完成したWebアプリケーションの公開（Devconnector deployed on Heroku)
  • 118日目：Udemy講座の感想口コミ＆自分に合った講座の選び方ポイント：Mern Stack Front to Back: Full Stack React, Redux & Node.js by Brad Traversy
  • 117日目：完成！Herokuへのデプロイ成功：Heroku CLIのインストールからWebアプリデプロイまで。Herokuの使い方と、package.jsonとgitコマンドではまったところと解決方法
おすすめの記事