Функция OnClick не рендерит компонент в реаги-редуксе

Question

Я работаю, чтобы решить эту проблему в течение нескольких часов.В моем компоненте приложения, чтобы добавить новый список при нажатии кнопки, я вызываю избыточное действие в качестве опоры, которая будет выдвигать новый список в массив списка.Я не вижу никаких ошибок с моим кодом, и этот кусок кода работал для другого компонента, но не в основном компоненте приложения.Что-то я делаю не так?

import React, { Component } from 'react';
import List from './components/list.react.js';
import './App.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {addList} from './ListAction.js';
import PropTypes from 'prop-types'
import AddIcon from './AddIcon.png';

class App extends Component {
   constructor(props){
   super(props);
  }

 getLists=()=>{
   return(
          this.props.lists.map((list)=>{
          return(               
                <List key={list.id} id={list.id} ></List>
            );         
          })
    )}

 render() {
  debugger;
  let ListId=1;
    return (
      <div className="Content">
      <div className="Header-Wrapper"><h1>React Redux App</h1></div>
      <div className="Boxes">
      <List id={ListId} />
      <div>{this.getLists}</div>
      <div className="wrapper">     
      <button className = "NewCard" onClick={this.props.addList}>
      <img src={AddIcon} alt="Add-Icon"></img>
       Add a new List
      </button>
      </div>
       </div>
      </div>
    );
  }
}

App.propTypes={
    lists:PropTypes.array.isRequired

   }

function mapStateToProps(state){

 return({lists:state.Lists}) 

}
function mapDispatchToProps(dispatch){

  return bindActionCreators({addList:addList},dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

Отредактировано:

используйте {this.getLists()} вместо {this.getList}.

(поскольку комментарий Амира Алеахмада был верным, я отредактировал свой первый)