我应该如何在我的react组件+ Redux中构建onClick动作

Question

我在Stack上经历了很多教程和问题,但我找不到解决方案.我刚学习React/redux,试图构建OnClick动作.我有以下错误"Maximum call stack size exceeded error".我得到了这个,因为我正在渲染一个无限改变我的状态的函数.我试图以<button onClick={DisplayTable(click)}>cool</button>不同的方式处理我,但似乎没有任何工作.我也知道我的动作,我猜我的减速器工作正常,因为当我通过控制台调度我的动作时:$r.store.dispatch({type: 'SET_TABLE_DATA'});我的状态正确更新.

有什么建议吗？

这是我的行动:

export const setTableFilter = (click) => {
  return {
    type: 'SET_TABLE_DATA',
    click : click,
  };
};

这是我的减速机:

const tableFilter = (state = 0, action) => {
    if(action.type === 'SET_TABLE_DATA') {
        return state + 1;
    }
        return state;
  }

这是我的组成部分:

const DisplayTable = (click) => {

        return (
        <div>
            <button onClick={DisplayTable(click)}>cool</button>
        </div> )
    }


function mapStateToProps(state) {
  return {
      click: state.tableFilter.click
  };
};


const mapDispachToProps = (dispatch) => {
    return {
  DisplayTable: (click) => {dispatch (setTableFilter(click));
        },
    };
};

const AppTable = connect(mapStateToProps, mapDispachToProps)(DisplayTable);

export default AppTable;

我也知道我应该以一种我的状态应该更新而没有任何突变的方式构建我的减速器,但是我会保留它以供以后使用!:)

谢谢.

Answer 1

给出的答案并没有真正解释为什么你的代码不起作用,所以我想我会扩展它.

您的问题是您超出了函数调用堆栈,通常称为无限递归.发生这种情况的原因是因为您没有将函数传递给onClick按钮的属性,而是调用函数并传递其返回值.所以发生以下情况:

• React组件安装到DOM
• render() 叫做
• DisplayTable调用该函数,该函数将更新分派给商店
• 商店更新,并将新道具传递给React组件
• render() 再次被召唤
• DisplayTable 再次被调用

...等等.

你要做的是将函数传递给按钮的onClick属性.所以你的组件应该是这样的:

const Component = props => {
    return (
        <div>
            <button onClick={props.DisplayTable}>cool</button>
        </div>
    );
};

在上面的代码片段中,我删除了你的click道具,因为它看起来根本不像你在使用它(考虑到你在OP中发布的代码).