javascript - 使用 useSelector 强制进行一次重新渲染

Question

这是 Refactoring class component to functional component with hooks, getting Uncaught TypeError: func.apply is not a function 的后续内容

我已经声明了一个功能组件 Parameter，它使用 useSelector Hook 从 actions/reducers 中提取值:

const Parameter = () => {
let viz = useSelector(state => state.fetchDashboard);
const parameterSelect = useSelector(state => state.fetchParameter)
const parameterCurrent = useSelector(state => state.currentParameter)
const dispatch = useDispatch();
const drawerOpen = useSelector(state => state.filterIconClick);

const handleParameterChange = (event, valKey, index, key) => {
    parameterCurrent[key] = event.target.value;
    return (
        prevState => ({
            ...prevState,
            parameterCurrent: parameterCurrent
        }),
        () => {
            viz
                .getWorkbook()
                .changeParameterValueAsync(key, valKey)
                .then(function () {
                    //some code describing an alert
                    });
                })

                .otherwise(function (err) {
                    alert(
                        //some code describing a different alert
                    );
                });
        }
    );
};
const classes = useStyles();
return (
    <div>
        {drawerOpen ? (
            Object.keys(parameterSelect).map((key, index) => {
                return (
                    <div>
                        <FormControl component="fieldset">
                            <FormLabel className={classes.label} component="legend">
                                {key}
                            </FormLabel>
                            {parameterSelect[key].map((valKey, valIndex) => {
                                return (
                                    <RadioGroup
                                        aria-label="parameter"
                                        name="parameter"
                                        value={parameterCurrent[key]}//This is where the change should be reflected in the radio button
                                        onChange={(e) => dispatch(
                                            handleParameterChange(e, valKey, index, key)
                                        )}
                                    >
                                        <FormControlLabel
                                            className={classes.formControlparams}
                                            value={valKey}
                                            control={
                                                <Radio
                                                    icon={
                                                        <RadioButtonUncheckedIcon fontSize="small" />
                                                    }
                                                    className={clsx(
                                                        classes.icon,
                                                        classes.checkedIcon
                                                    )}
                                                />
                                            }
                                            label={valKey}
                                        />
                                    </RadioGroup>
                                );
                            })}
                        </FormControl>
                        <Divider className={classes.divider} />
                    </div>
                );
            })
        ) : (
                <div />
            )
        }
    </div >
)
};
export default Parameter;

我需要发生的是 value={parameterCurrent[key]} 在handleParameterChange上重新渲染(handleChange确实更新了底层仪表板数据，但单选按钮不会显示为被选中，直到我关闭主组件并重新打开它)。我以为我有一个强制重新渲染的解决方案，但因为这是一个较小的组件，是较大组件的一部分，所以它破坏了组件的其他部分(即，它正在重新渲染并阻止其他组件获取来自它 reducer 的状态/ Prop )。我已经在互联网上搜索解决方案两天了，但还没有找到任何有效的方法。非常感谢任何帮助! TIA!

Answer 1

useSelector() 默认情况下使用严格的 === 引用相等性检查，而不是浅层相等性检查。

要使用浅等检查，请使用此

import { shallowEqual, useSelector } from 'react-redux'

const selectedData = useSelector(selectorReturningObject, shallowEqual)

Read more