使用来自 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;

此处为沙盒 link - https://codesandbox.io/s/o490z3wwny

Answer 1

在你的 mapState 函数中你有：

return { salesPerfData: state.salesPerfReducer.salesPerf }

但应该是：

return { salesPerfData: state.salesPerfReducer.salesPerfData }

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

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

使用来自 Redux React Hooks 的 useMappedState，组件在 API 响应后不会重新渲染

Using useMappedState from Redux React Hooks, component not re-rendered after API response

reactjs

react-hooks

redux-react-hook