Javascript 物料UI复选框不适用于Redux存储

可以在中访问源

我使用Redux store来更新复选框的check标志，我可以看到状态正在发生完美的变化，但这些东西并没有应用到React组件

我认为一切都很好，但当我更改状态并使用check时，checkbox并没有更新

• 使用的Redux存储位于

  src/Redux/modules/menu.js

  ，与复选框相关的操作创建者是

  checkMenuNameList

  函数

• 此外，复选框代码可以在

  src/containers/MenuEditContainer.js

  中找到

从“React”导入React
从“react redux”导入{connect}
从“redux”导入{bindActionCreators}
将*作为操作从“../redux/modules/menu”导入
从“../components/base/PageWrapper”导入PageWrapper
从“../components/common/templates/MenuEditWrapper”导入MenuEditWrapper
从“../components/common/content/MenuEditContent”导入MenuEditContent
const MenuEditContainer=（道具）=>{
const handleInputChange=name=>event=>{
props.actions.changeInput({
关键字：姓名，
值：event.target.value
})
props.actions.generatementList（event.target.value）
}
常量handleMenuNameCheckbox=索引=>事件=>{
props.actions.checkMenuNameList（索引）
}
返回(
)
}
常量mapStateToProps=（{menu}）=>({
menuId:menu.menuId，
menuName:menu.menuName，
menuPrice:menu.menuPrice，
menuNameList:menu.menuNameList，
MenuNameListSelected:menu.MenuNameListSelected，
})
const mapDispatchToProps=（调度）=>({
操作：bindActionCreators（操作、调度）
})
导出默认连接(
MapStateTops，
mapDispatchToProps
)（菜单编辑容器）

从“React”导入React
从“react router dom”导入{withRouter}
从“@material ui/core/Paper”导入纸张
从“@material ui/core/Typography”导入排版
从“@material ui/core/TextField”导入TextField
从“@material ui/core/FormGroup”导入FormGroup
从“@material ui/core/FormControlLabel”导入FormControlLabel
从“@material ui/core/Checkbox”导入复选框
从“../../排版/PageTitle”导入页面标题
从“../../button/AddButtonSet”导入AddButtonSet
从“../../button/EditButtonSet”导入EditButtonSet
从“@material ui/core/styles”导入{makeStyles}
const useStyles=makeStyles（主题=>({
根目录：{
填充：主题。间距（3，2）
},
标题：{
体重：200，
marginBottom：“1.5雷姆”
},
文本字段：{
边缘左侧：主题。间距（0.5），
边缘光：主题。间距（1），
宽度：200，
显示：“块”
},
}))
const MenuEditContent=（道具）=>{
常量类=useStyles（）
常量{match，location，history}=props
返回(
{
（location.pathname=='/menu/edit/new'）
? (`새로운 메뉴 등록`)
// 기존 메뉴 수정시
：（match.params.menuId）
? (`메뉴 수정`)
: (``)
}
{
（props.menuNameList.length>0）和(
{
props.menuNameList.map（（项目，索引）=>(
))
}
)  
}
{
（location.pathname=='/menu/edit/new'）
? (
警报（'创建按钮！'）}
onClickCancel={（）=>history.push（'/menu'）}
/>
)
：（match.params.menuId）
? (
警报（'更新按钮！'）}
onClickDelete={（）=>警报（'delete button！'）}
onClickCancel={（）=>history.push（'/menu'）}
/>
)
: ()
}
)
}
使用路由器导出默认值（菜单编辑内容）

我的复选框不起作用的原因是我错误地重复使用了以前的状态

//redux/modules/menu.js
const updateMenuNameList=createAction（更新菜单名称列表，有效载荷=>（{menuNameList:payload.menuNameList}））
导出常量checkMenuNameList=（索引）=>（分派，getState）=>{
const{menu:{menuNameList}}=getState（）
const previousStatus=menuNameList[index]。已选中
MenuAlist[索引]。已选中=！previousStatus
分派（onCheckMenuNameList（{updatedMenuNameList:menuNameList}））
}

在上面的示例中，我从

getState（）

获取了上一个状态，并从中提取

menuNameList

。

menuNameList

的结构如下所示：

[
{
名称：String，
选中：布尔值
}
]

每个复选框都使用此数组显示

名称

，并确定是否选中该复选框。当我单击任何复选框时，处理程序将更改已单击复选框的

已选中

值

问题由此产生：我意外地重复使用了以前的

菜单列表中的对象，并且仅在更改了某些
选中的
值后才对其进行更新。这不是一种正确的方法，因为即使内部属性发生了更改，Redux或React也不知道发生了什么更改！React和Redux找出状态更改因此，即使存储更改，React也不会渲染视图，并且更改不会应用于视图

为了避免这个问题，我们应该为
menuNameList
创建一个新对象。可能建议使用像
Immutable.js
这样的库

//redux/modules/menu.js
导出常量checkMenuNameList=（idx）=>（分派，getState）=>{
const{menu:{menuNameList}}=getState（）
//深度复制
const newMenuNameList=menuNameList.map（（项目，索引）=>{
如果（索引！==idx）{
const newMenu={
名称：item.name，
选中：item.checked
}
返回新菜单
}否则{
const newMenu={
名称：item.name，
选中：！item.checked
}
返回新菜单
}
})
dispatch（onCheckMenuNameList（{updatedMenuNameList: