Reactjs 如何在react组件&x2B；中构建onClick操作；重演

我已经阅读了很多关于Stack的教程和问题，但我找不到解决方案。我正在学习React/redux，尝试构建OnClick动作。我遇到以下错误

“超出最大调用堆栈大小错误”

。我得到这个是因为我正在渲染一个无限改变我状态的函数。我试图用不同的方式来处理我的

酷

，但似乎没有任何效果。 我还知道我的操作和我猜我的还原程序工作正常，因为当我通过控制台分派操作时：

$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;

constdisplaytable=（单击）=>{
返回(
凉爽的
)
}
函数MapStateTops（状态）{
返回{
单击：state.tableFilter.click
};
};
常量MapDispatchToprops=（调度）=>{
返回{
DisplayTable：（单击）=>{dispatch（setTableFilter（单击））；
},
};
};
const AppTable=connect（mapStateToProps，mapDispachToProps）（显示表）；
导出默认AppTable；

我还知道，我应该以一种方式构建我的reducer，即我的状态应该在不发生任何变化的情况下进行更新，但是我会将此保留到以后！：）

谢谢。
一些提示，不是一个完整的解决方案，因为这无助于您学习：

你的动作和减速器看起来不错。您正在传递未在减速器中使用的click属性。也许你会在将来使用它，但现在它是无用的

React组件函数将props作为参数：

const Comp = props => {
    const click = props.click;
    // ...
};

mapDispatchToProps
通常不需要。请改用普通对象：

connect(state => state.tableFilter, { setTableFilter })(DisplayTable);

然后，您可以通过道具访问该功能：

<button onClick={() => props.setTableFilter(click)}>cool</button>

props.setTableFilter（单击）}>cool

请记住：
onClick
接受一个函数

此外，您在reducer中定义的状态没有名为click的属性，而是一个数字（请参见上面的正确MapStateTrops函数）
给出的答案并不能真正解释代码不起作用的原因，因此我想对此进行扩展

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


React组件被装载到DOM
调用
render（）
调用
DisplayTable
函数，该函数向存储发送更新
商店会更新，并将新道具传递给React组件
再次调用
render（）
DisplayTable
再次被调用

……等等

您要做的是将函数传递给按钮的
onClick
属性。因此，您的组件应该如下所示：

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

const Component=props=>{
返回(
凉爽的
);
};

在上面的代码片段中，我删除了你的
点击
道具，因为它看起来根本不像你在使用它（考虑到你在OP中发布的代码）。
因为你提到你是新的react，我已经完成了本教程，谢谢。它真的帮助我了解了什么是减速器、动作等等。。。然而，当我试图建立自己的东西，它不工作…有时它是不需要的。这是因为
connect
的第二个参数可以是一个返回对象的函数，也可以是一个对象，每个键都假定为动作创建者。如果您使用一个对象，它将被包装在分派调用中。两种方法都很好。好的，谢谢。我将尝试所有这些，但我已经有了第一个问题，为什么通常不需要mapDispatchToProps？（这可能会真正帮助我理解这件事的目的。）在您的情况下，不需要将函数传递给
connect
，因为您可以传递引用动作创建者的对象。因此，您仍然将道具传递给可以向应用商店发送操作的组件，您只是以不同的方式来执行而已。就像我说的，两者之间真的没有区别。如果您对使用
mapDispatchToProps
函数更满意，请直接操作。@Herku，您是想写吗
props.setTableFilter（click）}>cool
@ryanpcmcquen是的，我在回答中纠正了这一点。这个答案其实很古老，我甚至不确定这里是否还有好的做法。这只是一个典型案例的答案，有人想一次学习5件事，陷入困境，然后去SO寻求帮助。当你做错5件事时，很难纠正。我想重要的部分是箭头函数。好的，谢谢。你真的提出了我的问题（除了我正在学习的事实：））。但是，当应用snipper时，它返回了
无法将未定义或null转换为object
。我想那是因为我的道具是一个空的东西？我可能需要看更多的代码才能知道你到底出了什么问题。也许您可以在中举出一个例子？我看到的唯一问题是，您正在使用
MapStateTrops
定义一个在您的状态中不存在的
click
prop，并且在
DisplayTable
函数中仍然需要一个
click
参数。确定。我清理了这一切，现在我可以看到状态更新时，我点击我的redux开发工具：）我会尝试继续这一切！谢谢