将Dispatch传递给设置ReactTable列的非组件？-Java 学习之路

我正在使用React Redux和Thunk作为我的前端应用程序 . 我使用ReactTable来呈现表视图 . ReactTable接受列和数据作为道具 . 由于我有来自graphQL服务器的数据，我必须打电话来获取数据 . 所以我有一个从服务器获取数据的动作，我正在使用thunk对该动作进行延迟调度 . 现在问题是因为我的 Headers 和表数据来自我的操作，该操作位于除组件之外的单独文件中，我想在我的 Headers 内访问调度，因为我已经渲染了自定义单元格，其中我有图标来删除我的表行和我想在删除任何项目后调度getData操作，以便我的表更新如何在非组件文件中访问调度，我无法调用connect？

1 回答

您可以将 fetchTableData 传递给 <Table> and 到 <Header /> 组件 . 例如

<TableContainer />

const mapStateToProps = (state) => ({
    hasError: hasError(state),
    isLoading: isLoading(state),
    tableData: getTableData(state),
});

const mapDispatchToProps = {
  fetchTableData,
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Table);

<Table />

export default class Table extends Component {
    componentDidMount() {
        // fetches table and header data for the first time when Table mounts
        this.fetchTableData();
    }
    render() {
        return (
          <div>
            // passes the fetchTableData function to Header so it can 
            // refetch the data when something is deleted
            <Header fetchTableData={props. fetchTableData}/>
            <Body />
          </div>
        );
    }
}

You can also consider:

将 <Header /> 连接到状态并设置其调度操作 .
在删除时不从API重新获取所有数据 . 如果删除成功，只需调度操作以从Redux状态中删除已删除的行 .

回复于 2024-05-19T17:23:16+08:00

将Dispatch传递给设置ReactTable列的非组件？

1 回答

相关问题