Question

我正在使用打字稿在基于React的应用程序中的表上工作。我正在实现表格的搜索功能。表内可以显示大量数据，因此我在后端执行搜索，排序和分页。

我有一个用于表的组件，该组件从父组件接收数据作为支持。我正在使用redux和sagas进行反应，我从后端获取数据。我正在使用redux状态向组件提供数据。我正在使用reducers来改变状态。

我面临的问题是，当我重新加载数据时，我得到了数据，并使用reducer改变了状态，但该状态未在前端显示。但是当我第二次尝试时，它将显示数据。

我的减速器代码如下。

const dataEnteries: Reducer<any> = (
    state = {},
    { type, detail, pagination }: DataResponse
) => {
    switch (type) {
        case actionTypes.DATA_LOAD_RESPONSE:
            if (!detail) {
                return {};
            }
            const data: any[] = [];
            const tableData: any[] = [];
            detail.forEach((o) => {
                tableData.push(o.dataDetail);
                Data.push(o)
            })
            const resultMap = new Map()
            resultMap["data"] = data;
            resultMap["tableData"] = tableData;
            resultMap["pagination"] = pagination;
            return resultMap;
        default:
            return state;
    }
};

这是我对道具功能的映射状态

const mapStateToProps = ({ data }: { data: DataState }): DataProps => ({
    data: data.dataEnteries
});

dataEnteries是最里面的属性

我无法弄清楚我的情况出了什么问题，因为第二次一切正常。

Answer 1

您可以尝试在返回时使用点差运算符。

return ...resultMap

当您更新对象内部的道具时，状态无法识别更改，那么将不会调用渲染器来刷新组件。

尝试一下，如果不行，请告诉我。

要进一步推荐，请检查：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Redux：Reducer第一次尝试时不改变状态

1 个答案: