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)

----我能在这里记录liveBanners ......好吧--- 但是这个值并没有在愚蠢的组件中得到更新......就像我一直在做的其他变量......可能是因为有太多了？减速机里面的计算？我几乎不怀疑这就是原因。但如果您有任何预感可能出错，请告诉我。我在这一点上都是耳朵..谢谢。

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

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

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

Answer 1

你在减速器中改变你当前的状态对象：

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,
})

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

1 个答案: