Reactjs 使用Redux React钩子中的useMappedState，API响应后不会重新呈现组件

useMappedState

在从Ajax响应接收更新时不会重新呈现组件 下面是我正在使用的组件。我已经记录了各个阶段的条目，并附上了一个新的单一渲染的屏幕截图

您可以安全地假设redux部分在reducer和action方面运行良好，从mapState内salerfdata的控制台条目中可以看到，在expanded from中的响应之前和之后

import React, { useCallback, useState, useEffect, memo } from 'react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import StackedChart from '../../../components/StackedChart/index';
import { useDispatch, useMappedState } from 'redux-react-hook';
import { Creators } from './actions';

const SalesPerformance = ( ) => {
    const mapState = useCallback(
        (state) => { 
            console.log('inside mapSate', state);
            return { salesPerfData: state.salesPerfReducer.salesPerf } 
        },
        []
    );
    const { salesPerfData } = useMappedState(mapState);
    console.log('after useMappedState', salesPerfData);
    const dispatch = useDispatch();

    useEffect(
        () => {
            dispatch(Creators.fetchSalesPerf({ filter: 'monthly', duration: 'last3' }))
        },
        []
    );

    return (
        <section>
            <Paper className='mTB30'>
                <Grid container>
                    <Grid item sm={12}>
                        <StackedChart config={salesPerfData}  />
                    </Grid>
                </Grid>
            </Paper>
        </section>
    );
};
export default SalesPerformance;

import React，{useCallback，useState，useffect，memo}来自“React”；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从“../../../components/StackedChart/index”导入StackedChart；
从'redux react hook'导入{useDispatch，useMappedState}；
从“/actions”导入{Creators}；
const SalesperPerformance=（）=>{
const mapState=useCallback(
（州）=>{
console.log（'insidemapsate'，state）；
返回{salerfdata:state.salerfreducer.salerf}
},
[]
);
const{saleerfdata}=useMappedState（mapState）；
log（'useMappedState'之后，salerfdata'）；
const dispatch=usedpatch（）；
使用效果(
() => {
分派（Creators.fetchsalesrf（{filter:'monthly'，duration:'last3'}））
},
[]
);
返回(
);
};
导出默认销售业绩；

---

此处的沙盒链接-

在您的

mapState

功能中，您有：

return { salesPerfData: state.salesPerfReducer.salesPerf } 

但它应该是：

return { salesPerfData: state.salesPerfReducer.salesPerfData }

salesrf数据而不是salesrf。由于

salerf

未在

salerfreducer

中定义，因此您的

salerfdata

变量仍未定义

---

修复此错误会导致其他一些错误，我认为这些错误是由于下游代码尚未测试造成的。

argghhh！我现在犯了愚蠢的错误。非常感谢。我删除了另一个问题。它对我有用。它解决了我在实际项目中想要什么的问题。我们将放弃沙箱链接。