title: Why is my component not updated after using map?
body: <p>I used a map in the data structure, but the components will not update when my data is updated. Why is this?</p>
  <p>I use <code>console.log</code> to output 5 pieces of data, but there are only 3 pieces of data on the page, which will not be updated!!!</p>
  <p><a href="https://i.stack.imgur.com/e4CcH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e4CcH.png" alt="enter image description here" /></a></p>
  <h3>Component</h3>
  <pre><code>import React, {ChangeEventHandler, Component} from &quot;react&quot;;
  import {connect} from 'react-redux';
  import {RootState} from &quot;typesafe-actions&quot;;
  import {getMessage} from &quot;./store/selectors&quot;;
  import {submitComment} from './store/actions'
  
  const mapDispatchToProps = {
      submit: submitComment
  };
  
  const mapStateToProps = (state: RootState) =&gt; {
      return {
          article: getMessage(state.article, 1)
      }
  }
  
  type Props = ReturnType&lt;typeof mapStateToProps&gt; &amp; typeof mapDispatchToProps;
  
  type State = {
      value: string
  }
  
  class Todo extends Component&lt;Props, State&gt; {
      readonly state = {value: ''}
  
  
      public render() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;{this.props.article?.title}&lt;/h1&gt;
  
                  {this.props.article?.comments.map((comment) =&gt; &lt;li key={comment.title}&gt;{comment.title}&lt;/li&gt;)}
  
                  &lt;input type=&quot;text&quot; onChange={this.onChange}/&gt;
  
                  &lt;button onClick={this.handleSubmit}&gt;submit&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  
      private handleSubmit = () =&gt; {
          this.props.submit(this.state.value);
      }
  
      private onChange: ChangeEventHandler&lt;HTMLInputElement&gt; = (e) =&gt; {
          this.setState({value: e.currentTarget.value});
      }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Todo);
  </code></pre>
  <h3>reducer.ts</h3>
  <pre><code>import {createReducer, PayloadAction} from &quot;typesafe-actions&quot;;
  import * as actions from './actions';
  
  interface Comment {
      title: string
  }
  
  interface Article {
      title: string
      comments: Comment[]
  }
  
  interface App {
      articles: Map&lt;number, Article&gt;
  }
  
  const initState: App = {
      articles: new Map&lt;number, Article&gt;([
          [1, {title: 'article', comments: [{title: 'comment-1'}, {title: 'comment-2'}]}]
      ])
  }
  
  export const articleReducer = createReducer&lt;App&gt;(initState)
      .handleAction(actions.submitComment, (state: App, action: PayloadAction&lt;string, string&gt;) =&gt; {
          const article = state.articles.get(1)
          article?.comments.push({title: action.payload})
  
          console.log(article?.comments);
  
          return {
              articles: state.articles
          }
      });
  
  
  export default articleReducer;
  
  export type ArticleState = ReturnType&lt;typeof articleReducer&gt;;
  </code></pre>
  <h3>actions.ts</h3>
  <pre><code>import {createAction} from &quot;typesafe-actions&quot;;
  
  export const submitComment = createAction(&quot;SUBMIT_COMMENT&quot;, (title: string) =&gt; (title))();
  </code></pre>