title: React: first time, undefined error, but after reload, it success
body: <p>I make web application with react, redux, redux-thunk, react-router-dom v4.</p>
  
  <p>I have created a component that loads a post.</p>
  
  <p>But at the beginning, the value is undefined, and the value is loaded successfully when I reload page.</p>
  
  <p>Why will not the value come in at first?</p>
  
  <p>App.js:</p>
  
  <pre><code>...
  {this.props.posts.map((post, index) =&gt; (
            &lt;div key={index} style={{ border: "1px solid black" }}&gt;
              &lt;Link to={`/post/${post._id}`}&gt;{post.title}&lt;/Link&gt;
              &lt;br /&gt;
              &lt;span&gt;{post.content}&lt;/span&gt;
              &lt;br /&gt;
              &lt;span&gt;{post.author}&lt;/span&gt;
            &lt;/div&gt;
          ))}
  ...
  </code></pre>
  
  <p>Post.js:</p>
  
  <pre><code>class Post extends Component {
    componentDidMount() {
      this.props.getPostDetailFetch(this.props.match.params.id);
    }
  
    render() {
      return (
        &lt;Container&gt;
          &lt;Row&gt;
            &lt;Col xs="12"&gt;
              &lt;h1&gt;{this.props.post.title}&lt;/h1&gt;
            &lt;/Col&gt;
            &lt;Col xs="12"&gt;
              &lt;h3&gt;{this.props.post.author}&lt;/h3&gt;
             &lt;Col xs="12"&gt;
              &lt;p&gt;{this.props.post.content}&lt;/p&gt;
             &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
         );
      }
    }
   ...
  </code></pre>
  
  <p>index.js:</p>
  
  <pre><code>import { Router, Route } from "react-router-dom";
  import history from "./history";
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router history={history}&gt;
       &lt;div&gt;
          &lt;Route exact path="/" component={App} /&gt;
          &lt;Route path="/post/:id" component={Post} /&gt;
       &lt;/div&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;,
     document.getElementById("root")
    );
  </code></pre>