Question

我有一个组件OnePayrunGridContainer，该组件包装在react-redux的connect组件中。

有两个不同的异步操作来更新redux存储-

FETCH_PAYRUN_TS_DETAILS-加载组件后检索所有数据
FETCH_TIMESLIP_DATA-更新state.timeslipInModal

timeslipInModal中有一个对象时，我的渲染函数以模态形式显示它。

在chrome和firefox的react工具中，我可以看到console.log的输出表明redux存储已更新，mapStateToProps已被调用，但是当我在react控制台中检查组件时，道具timeslipInModal仍为false-它是首次渲染组件时的初始值。

mapStateToProps的{{3}}说-

新组件将订阅Redux存储更新。这意味着只要商店更新，就会调用mapStateToProps。

正在发生的事情（我从console.log中的mapStateToProps知道这一点。）

文档还显示-

mapStateToProps的结果必须是一个普通对象，它将被合并到组件的props中。

这部分没有发生。我console.log的redux存储newState就在返回它之前-打开axios调试功能后，在控制台中可以看到相同的输出。

mapStateToProps函数的结果是一个普通对象，但是此对象并未合并到子组件props中-此屏幕截图对此进行了说明：

react-redux documentation

下面是显示I console.log(props.timeslipInModal)的代码，该代码在控制台中为假，但包装的组件的属性未更改。

const mapStateToProps = (state) => {
    let props = {
        userIdBy: false,
        apiToken: false
    };
    props.timeslipInModal = state.timeslipInModal ? state.timeslipInModal : false;
    if (state && state.myBus) {
        if (state.myBus.payrun) {
            // state.myBus.payrun.loading, loaded and errors copied by this
            props = Object.assign(state.myBus.payrun, props);
        }
        if (state.myBus.common && state.myBus.common.auth) {
            props.userIdBy = state.myBus.common.auth.userId;
            props.apiToken = state.myBus.common.auth.apiToken;
        }
    }
    console.log('timeslipInModal at the end of mapStateToProps:', props.timeslipInModal);
    return props;
};
const mapDispatchToProps = (dispatch, ownProps) => ({
    dispatch,
    fetchPayrunDetails:
        dispatch(fetchPayrunDetails(ownProps.userIdBy, ownProps.apiToken, ownProps.entityId))
});
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(OnePayrunGridContainer);

我的fetchPayrunDetails的减速器看起来像这样：

case 'FETCH_PAYRUN_TS_DETAILS_FULFILLED': {
    const newState = Object.assign({}, state);
    newState.myBus = Object.assign({}, state.myBus);
    newState.myBus.payrun = action.payload.data.data;
    newState.myBus.payrun.loading = false;
    newState.myBus.payrun.loaded = true;
    newState.myBus.payrun.errors = false;
    return newState;
}

我的Reducer更新reactStore.timeslipInModal是reducer.js中的另一种情况：

case 'FETCH_TIMESLIP_DATA_FULFILLED': {
    if (action.payload.data.errors) {
        // caputure errors - not relevant here
    }
    const newState = Object.assign({}, state, {
        modalFetchErrors: false,
        modalFetched: true,
        modalFetching: false,
        modalValidating: false,
        timeslipInModal: action.payload.data.timeslip
    });
    return newState;
}

一件事有点“不同”，因此可能是一个问题-在我的entry.js脚本中，我有一个循环，其中我按其ID查找html实体，并根据其ID进行调用正确的呈现组件。

这使我可以在公用模板视图的末尾调用一个entry.js脚本。

import OnePayrunGridContainer from './components/payrun/OnePayrunGridContainer.js';
import {Provider} from 'react-redux';
import store from './store.js';
// put these in here so they match code searches - these container components
// are included below by Alias so explicitly list them here: <OnePayrunGridContainer>
let componentNamesByRootElementIds = {
    onePayrunGridMyBus: OnePayrunGridContainer
};
let htmlElement = false;
for (let onereactElementId in componentNamesByRootElementIds) {
    htmlElement = document.getElementById(onereactElementId);
    if (htmlElement) {
        let Component = componentNamesByRootElementIds[onereactElementId];
        ReactDOM.render(
            <Provider store={store}>
                <Component
                    userIdBy={userIdBy}
                    apiToken={apiToken}
                    entityId={entityId}
                    onereactElementId={onereactElementId}
                />
            </Provider>,
            htmlElement
        );
    }
}

此外，我确实将connect中的OnePayrunGridContainer.js导出了：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(OnePayrunGridContainer)

在进行FETCH_PAYRUN_TS_DETAILS_FULFILLED调用以更新Redux存储时，其他道具全部更新-我缺少什么？当FETCH_TIMESLIP_DATA_FULFILLED操作更新redux状态时，如何正确更新包装组件上的道具？

对redux mapStateToProps做出反应-正确的道具未在组件中使用

0 个答案: