我已经声明了一个功能组件Parameter,该参数使用useSelector挂钩从动作/归约器中提取值:
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确实更新了基础仪表板数据,但是在关闭主组件之前,单选按钮不会显示为已选中状态然后重新打开)。我以为我有一个强制重新渲染的解决方案,但是由于这是一个较小的组件,是较大组件的一部分,因此它破坏了该组件的其他部分(即,它正在重新渲染并阻止其他组件获取状态/道具来自它的减速器)。我已经在互联网上搜寻解决方案2天了,但是还没有找到任何可行的方法。真的需要任何帮助! TIA!
答案 0 :(得分:1)
useSelector()
默认使用严格的===
参考相等检查,而不是浅相等检查。
要使用浅相等检查,请使用此
import { shallowEqual, useSelector } from 'react-redux'
const selectedData = useSelector(selectorReturningObject, shallowEqual)
答案 1 :(得分:-1)
好吧,经过很多次迭代,我找到了一种使它工作的方法(我确定这不是最漂亮或最有效的方法,但是它可以工作,所以我继续使用它)。我在下面发布了更改代码。
在声明整体Parameter函数时,我添加了updateState和forceUpdate行:
const Parameter = () => {
let viz = useSelector(state => state.fetchDashboard);
const parameterSelect = useSelector(state => state.fetchParameter)
const parameterCurrent = useSelector(state => state.currentParameter);
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
const dispatch = useDispatch();
const drawerOpen = useSelector(state => state.filterIconClick);
然后在此处添加forceUpdate()行:
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
);
});
forceUpdate() //added here
}
);
};
然后在要重新渲染的项目的return语句中调用forceUpdate:
<RadioGroup
aria-label="parameter"
name="parameter"
value={forceUpdate, parameterCurrent[key]}//added forceUpdate here
onChange={(e) => dispatch(
handleParameterChange(e, valKey, index, key)
)}
>
我已经测试过了,并且没有破坏任何其他代码。谢谢!