Question

当redux状态更改时，我的一个组件无法正确呈现。我相信这与国家的变迁有关，但我似乎无法解决。状态确实会正确更改，并且所有数据都正确填充，但是它不会重新呈现组件。当我将其连接到组件的本地状态并在那里设置状态时，它可以正常工作。以下是我创建的减速器。我遇到的问题与COMPANY_SUCCESS案有关。

const companyReducer = (state = initalState, action) => {
console.log("Company State: ", state);
switch (action.type) {
case COMPANY_REQUEST:
    return {
        ...state,
        isFetching: true
    };
case COMPANY_SUCCESS:
    return {
        ...state,
        isFetching: false,
        companies: {
            ...state.companies,
            [action.companyID]: {
                companyInfo: action.companyInfo,
                services: action.companyInfo.services,
                socialMedia: action.companyInfo.socialMedia,
                companyImages: action.companyInfo.companyImages,
                companyHours: action.companyInfo.companyHours,
                about: action.companyInfo.about
            }
        }
    };
case COMPANY_FAILURE:
    return {
        ...state,
        isFetching: false,
        error: action.error
    };


const initalState = {
    isFetching: false,
    error: null,
    companies: {}
};

function mapStateToProps(state) {
return {
    companyReducer: state.companyReducer
  };
}

Answer 1

我想象你的减速器对象没有改变。对象（和数组）是JavaScript中的引用。您可以更改对象而无需更改引用。如果引用不变，则React认为新值与旧值相同，并且不会重新呈现。再次返回<Test value={2} />时，<Test value={2} />不会重新呈现的方式相同，再次返回<MyComponent companyReducer={theStateObject} />时，组件<MyComponent companyReducer={theStateObject} />也不会重新呈现。您的theStateObject可能已经更改了一些键/值对，但是状态对象本身仍指向内存中的相同位置。

您应该将状态内而不是整个状态内的某些值作为属性返回给组件。甚至像return state.companyReducer这样简单的东西，例如isFetching，companies和error的道具也会触发重新渲染，因为您的companies对象获得了新的当您使用传播运算符更改它时在内存中的位置。

您将返回{...state,etc}的事实意味着该状态已成为内存中新生成的对象，但这更多是redux内部如何处理返回的对象的信息，所以我不能肯定地说保留新生成的对象，而不是Object.assign对其进行保存。

Redux不重新渲染组件

1 个答案: