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中发布的代码）。

Answer 2

一些提示，而不是一个完整的解决方案，因为这不会帮助你学习：

你的动作和减速器看起来很好。您正在传递单击属性，该属性未在reducer中使用。也许你将来会用它，但现在它没用了。

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

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

通常不需要

mapDispatchToProps。改为使用普通对象：

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

然后您可以从props访问该功能：

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

请记住：onClick需要一个功能！

此外，您在reducer中定义的状态没有名为 click 的属性，而是一个数字（请参阅上面正确的mapStateToProps函数）

我应该如何在我的反应组件+ Redux

2 个答案: