reactjs - 使用 Redux React Hooks 中的 useMappedState，API 响应后组件不会重新渲染

Question

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

您可以放心地假设 redux 部分对于 reducer 和操作可以正常工作，这可以从 mapState 中的 salesPerfData 控制台条目中看到，在响应扩展之前和之后从

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;

沙盒链接在这里 - https://codesandbox.io/s/o490z3wwny

Answer 1

在您的mapState功能中，您有：

return { salesPerfData: state.salesPerfReducer.salesPerf } 

但应该是：

return { salesPerfData: state.salesPerfReducer.salesPerfData }

salesPerf数据而不是 salesPerf。由于salesPerf未在 内定义salesPerfReducer，因此您的salesPerfData变量仍未定义。

修复此问题会导致一些其他错误，我认为这些错误只是由于下游代码尚未经过测试。