默认情况下，
这是用钩子将类组件重构为功能组件的后续操作，得到Uncaught TypeError:func.apply不是函数
我已经声明了一个函数组件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确实更新了基本的仪表板数据，但在我关闭主组件并重新打开它之前，单选按钮不会显示为选中(。我以为我有一个解决方案，我强制重新渲染，但因为这是一个较小的组件，是较大组件的一部分，所以它破坏了组件的其他部分(即，它正在重新渲染，并阻止其他组件从的还原器获取状态/道具(。我在网上搜索解决方案已经两天了，还没有找到任何有效的解决方案。真的很感激任何帮助！TIA！
useSelector()使用严格的===引用相等检查，而不是浅相等检查。
要使用浅相等检查，请使用此
import { shallowEqual, useSelector } from 'react-redux'
const selectedData = useSelector(selectorReturningObject, shallowEqual)
阅读更多
好的，经过大量的迭代，我找到了一种使其工作的方法(我相信这不是最漂亮或最高效的，但它是有效的，所以我继续使用它(。我已经在下面发布了带有更改的代码。
在声明整个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
}
);
}；
然后在我想要重新呈现的项目的返回语句中调用forceUpdate：
<RadioGroup
aria-label="parameter"
name="parameter"
value={forceUpdate, parameterCurrent[key]}//added forceUpdate here
onChange={(e) => dispatch(
handleParameterChange(e, valKey, index, key)
)}
>
我已经测试过了，它不会破坏任何其他代码。谢谢