Question

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

您可以放心地认为redux部件对于reducers和action都工作正常，如从mapState内的salesPerfData的控制台条目可见，在响应之前和之后，扩展自<< / p>

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变量仍未定义。

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

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

1 个答案: