无状态功能组件方法永远不会从 Redux 存储中获取新数据，但其他方法会这样做

Posted 2023-03-28

【中文标题】无状态功能组件方法永远不会从 Redux 存储中获取新数据，但其他方法会这样做

【英文标题】：Stateless functional component method never gets fresh data from Redux store, but others do

【发布时间】：2019-01-31 03:49:35

【问题描述】：

我遇到了一些麻烦。 我有一个非常常见的功能组件通过 mapStateToProps 连接到 Redux：

    const TableWrapper = ( studentsSelection ) => 

  const onComponentStateChanged = params =>
    params.api.forEachNode(node =>
      studentsSelection.selectedStudents.findIndex(student =>
        student.number === node.data.number) >= 0 &&
      node.setSelected(true)
    );

  const gridOptions = getGridOptions(onComponentStateChanged(), onSelection);

  return (
    <BootStrapTableWrapper>
      <Table gridOptions=gridOptions />
    </BootStrapTableWrapper>
  );
;
TableWrapper.propTypes = 
  studentsSelection: PropTypes.shape(
    selectedStudents: PropTypes.array
  )
;

const mapStateToProps = state => (
  studentsSelection: state.gpCreationWizard.studentsSelection
);

export default connect(mapStateToProps)(TableWrapper);

其中 getGridOption 指的是这个：

const getStudentsSelectionGridOptions = (onComponentStateChanged, updateStudentsSelectionSelectionAction) => (
    ...studentsSelectionGridOptions,
    onComponentStateChanged(props) 
        onComponentStateChanged(props);
    ,
    onRowSelected(node) 
        updateStudentsSelectionSelectionAction(node);
    ,
);

export default getStudentsSelectionGridOptions;

生成的 gridOptions 用于 Ag-Grid 表。

所以让我解释一下业务功能：我正在使用 Ag-Grid 表，当用户选择一些学生时，他们会被添加到 Redux 存储中。然后我使用onComponentStateChanged 将选择保持在分页上。因此，如果用户更改了页面，并且旧数据将被新数据替换，我希望在他返回时保留选择。但问题是onComponentStateChanged 总是指同一个studentsSelection.selectedStudents（但其他方法和渲染接收新数据）。所以这可能是关于 js 作用域的东西。请问，我应该怎么做才能使这个函数使用新数据，而不是旧数据。我试图将那个包装在另一个函数中，但这没有任何效果。有趣的事实是，这适用于类组件和 this.props 引用。如果我解释得不是很清楚，请询问更多细节。

【问题讨论】：

你能显示getGridOptions吗？

@ChrisCousins 你好！ getGridOptions = getStudentsSelectionGridOptions，在导入时重命名。谢谢

【参考方案1】：

不确定 getGridOptions 是做什么的...但我认为问题在于，您调用的是方法而不是传递方法，因此请更改：

const gridOptions = getGridOptions(onComponentStateChanged(), onSelection);

到：

const gridOptions = getGridOptions(onComponentStateChanged, onSelection);

所以onComponentStateChanged 是作为方法发送的，而不是调用它的结果

【讨论】：

如果没有，params 永远不会被使用

可能不是这样，因为onComponentStateChanged返回一个函数，在getStudentsSelectionGridOptions中使用。我是有意识地这样做的。

onComponentStateChanged 不返回函数，是函数。并且您使用未定义的参数调用它，所以它一定是在崩溃...控制台没有显示任何内容？

哎呀。我的坏，没有注意到。我复制了一个错误，实际上它看起来像const gridOptions = getGridOptions(onComponentStateChanged, onSelection);

但仍然没有效果。我有一种感觉，Ag-Grid 出于某种原因以某种方式改变了函数的范围，并且不再对新数据做出反应。