Question

我已经为解决这个问题工作了几个小时。在我的App组件中，通过单击按钮添加新列表，我正在调用redux动作作为道具，它将新列表推送到列表数组中。我没有看到我的代码有任何错误，并且这段代码适用于另一个组件，但不适用于主要的App组件。我在做错什么吗？

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}。

（因为Amir Aleahmad评论是正确的答案，所以我编辑了我的第一个答案）

OnClick函数未在react-redux中呈现组件

1 个答案: