一些数据没有使用 react-redux 从容器组件传递到哑组件

Question

我有点受挫，因为当您使用 react-redux 的 connect api 时，它曾经自动工作。 但是现在我面临这样一种情况，即当从 reducer 返回某些数据时，某些数据没有得到更新..

这是我的伪代码..

在我的reducer文件中..

case "SORT_BY_DATE":
    let startDateSort = state.startDateSort;
    let endDateSort = state.endDateSort;
    const sortByStartDateUp = function(a, b) {
        return new Date(a.start_date) > new Date(b.start_date) ? 1 :-1;
        }
    const sortByStartDateDown = function(a, b) {
        return new Date(b.start_date) > new Date(a.start_date) ? 1:-1;
        }
    const sortByEndDateUp = function(a, b) {
        return new Date(a.stop_date) > new Date(b.stop_date) ? 1 : -1;
        }
    const sortByEndDateDown = function(a, b) {
        return new Date(b.stop_date) > new Date(a.stop_date) ? 1 : -1;
        }
        let sortFunctionByDate = "";
    if (action.time == "start"){
        sortFunctionByDate = startDateSort == true ? sortByStartDateUp : sortByStartDateDown;
            startDateSort = !startDateSort;
    }else{
        sortFunctionByDate = endDateSort == true ? sortByEndDateUp : sortByEndDateDown;
        endDateSort = !endDateSort;
        }
    let filtered = state.status + "Banners";
        let banners_filtered =state['banners'].sort(sortFunctionByDate)
        state[filtered] = banners_filtered;
        state["banners"] = banners_filtered
        return Object.assign({}, state, {
            startDateSort,
            endDateSort,
            showImageButton: false,
        })

到目前为止，我能够断言我得到了正确的信息。来自banners_filtered 变量。

这是我的容器组件：

 const mapStateToProps = (state) => {
let {liveBanners} = state.BannerReducer;
console.log("liveBanners", liveBanners)
return {
    liveBanners
}

}

const BannerTableList = connect(mapStateToProps,mapDispatchToProps(BannerTable)

----我也可以在这里记录 liveBanner ..以及 --- 但是这个值在哑组件中没有得到更新......就像我一直在做的其他变量一样......可能是因为太多了吗？减速器内部的计算？我几乎不怀疑这就是原因。但是，如果您有任何预感可能出了什么问题，请告诉我。在这一点上我全神贯注..谢谢。

——控制台也没有显示错误—— ---更多代码更新--

const BannerTable = ({liveBanners}) => {
   console.log("banners", liveBanners)
}

上面是我使用无状态函数的哑组件，liveBanner 从未登录控制台。

Answer 1

你在这里改变你的 reducer 中的当前状态对象：

state[filtered] = banners_filtered;
state["banners"] = banners_filtered
return Object.assign({}, state, {
    startDateSort,
    endDateSort,
    showImageButton: false,
})

这可以防止 react-redux 检测到更改，从而阻止预期的重新渲染。您可能只需将其更改为：

return Object.assign({}, state, {
    [filtered]:banners_filtered,
    banners: banners_filtered,
    startDateSort,
    endDateSort,
    showImageButton: false,
})