Javascript 如何将React组件的状态重置为以前应用的状态？

我有一个按钮，可以切换下拉菜单。在此菜单中，用户可以切换复选框、应用更改或取消

取消应将复选框重置为以前应用的更改

我正在努力重置

过滤器菜单

组件的状态。我试图严格化初始状态，但事实证明这是有限的

如何将

过滤器菜单

组件的状态重置为先前应用的更改

当用户取消时：

过滤器组件

//close menu and reset state
handleCancel() {    
    this.setState({menuOpen: false});
    this.props.resetState();
}

resetState() {
   this.setState(JSON.parse(this.baseState));
}

调用resetState，解析并设置我的初始状态

主要部件

//close menu and reset state
handleCancel() {    
    this.setState({menuOpen: false});
    this.props.resetState();
}

resetState() {
   this.setState(JSON.parse(this.baseState));
}

一小条

const FilterMenu=（{复选框，handleChange，handleCancel，handleSave}）=>{
返回(
{Object.keys（复选框）.map（key=>{
返回(
{复选框[key].name}
);
})}
取消
拯救
);
};
类过滤器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
梅努本：错，
};
this.handleCancel=this.handleCancel.bind（this）；
this.handleButtonClick=this.handleButtonClick.bind（this）；
}
handleCancel（）{
this.setState（{menuOpen:false}）；
this.props.resetState（）；
}
把手按钮点击（）{
this.setState（{menuOpen:！this.state.menuOpen}）；
}
render（）{
返回(
选择水果
{this.state.menuOpen&&(
)}
);
}
}
//父组件
类Main扩展了React.Component{
构造函数（）{
超级（）；
此.state={
复选框：{
1: {
名称：'苹果'，
我问：是的，
},
2: {
名字：'梨'，
我问：是的，
},
3: {
名字：“西红柿”，
我问：是的，
},
},
水果：{
1: {
名称：'苹果'，
},
3: {
名称：'苹果'，
},
4: {
名字：'梨'，
},
5: {
名字：“西红柿”，
},
6: {
名称：'苹果'，
},
},
复选框：[]，
};
this.baseState=JSON.stringify（this.state）；
this.fruitFilter=this.fruitFilter.bind（this）；
this.handleSave=this.handleSave.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.resetState=this.resetState.bind（this）；
}
重置状态（）{
this.setState（JSON.parse（this.baseState））；
}
//使用要筛选的名称填充checkedboxs数组
handleSave（）{
//看看这些复选框
//根据检查的水果过滤水果`
const checkedboxs=Object.keys（this.state.checkedboxs）
.filter（键=>{
//如果选中，则返回水果名称
返回此.state.checkbox[key].isChecked
？this.state.checkbox[key].name
：假；
})
.减少（（a，b）=>{
a、 推送（this.state.checkbox[b].name）；
返回a；
}, []);
控制台日志（复选框）；
this.setState（{checkedboxs:checkedboxs}）；
}
//处理复选框切换
手变（e）{
const checkBoxes={…this.state.checkBoxes}；
复选框[e.target.id].isChecked=e.target.checked；
this.setState（{checkbox:checkbox}）；
}
//过滤水果-如果未检查任何东西，则将其全部退回
水果过滤器（水果）{
返回对象。键（水果）
.filter（键=>{
返回(
this.state.checkedboxs.length-1
);
})
.减少（（a，b）=>{
a[b]=水果[b]；
返回a；
}, {});
}
render（）{
const visibleFruits=this.fruitFilter（this.state.fruit）；
返回(
过滤水果
{Object.keys（visibleFruits.map）（key=>{
返回(
{visibleFruits[key].name}
);
})}
);
}
}
ReactDOM.render（，document.getElementById（'react'））

---

问题在于您没有在修改之前保存以前的状态。请记住，构造函数只调用一次。
我在

handleSave中添加的代码

this.baseState =  JSON.stringify(this.state.checkBoxes)

在
resetState

this.setState({checkBoxes: JSON.parse(this.baseState)});

以下是修改后的版本：


const FilterMenu=（{复选框，handleChange，handleCancel，handleSave}）=>{
返回(
{Object.keys（复选框）.map（key=>{
返回(
{复选框[key].name}
);
})}
取消
拯救
);
};
类过滤器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
梅努本：错，
};
this.handleCancel=this.handleCancel.bind（this）；
this.handleButtonClick=this.handleButtonClick.bind（this）；
}
handleCancel（）{
//this.setState（{menuOpen:false}）；
this.props.resetState（）；
}
把手按钮点击（）{
this.setState（{menuOpen:！this.state.menuOpen}）；
}
render（）{
返回(
选择水果
{this.state.menuOpen&&(
)}
);
}
}
//父组件
类Main扩展了React.Component{
构造函数（）{
超级（）；
此.state={
复选框：{
1: {
名称：'苹果'，
我问：是的，
},
2: {
名字：'梨'，
我问：是的，
},
3: {
名字：“西红柿”，
我问：是的，
},
},
水果：{
1: {
名称：'苹果'，
},
3: {
名称：'苹果'，
},
4: {
名字：'梨'，
},
5: {
名字：“西红柿”，
},
6: {
名称：'苹果'，
},
},
复选框：[“苹果”、“梨”、“番茄”]，
};
this.baseState=JSON.stringify（this.state.checkbox）
这