Javascript 反应：此.setState未重置状态

我有一些要提取的数据要呈现，本质上我希望有一个复选框来重置状态和DOM，就像页面加载时一样

最初，我在状态上有一个选定的属性和一个条件，以确保它正常工作。成功了。但我不能让它工作，我错过了什么

2018年5月9日更新

正如Jay在下面建议的那样，我将把整个模块放在一个片段中，重点放在问题的关键部分

整个模块在下面的一个片段中

我有一个组件，它显示一组对象，每个对象都被提取到自己的卡片中。以下是清晰的屏幕截图

以下是我的组件中的方法：

handleReset() {
    this.setState({
      data: this.props.data,
    });
  }

这是正在呈现的JSX

<label>
  <input type="checkbox" onChange={this.handleReset} />
  <b>reset</b>
</label>

重置

经过一段时间的思考，我意识到我的HandReset没有做任何事情，可能是因为它只是将状态呈现为现在的状态。那么我的问题是，如何回到UI最初的样子？预分拣

import-React{
组成部分
}从"反应",；
进口{
卡片
选择
段
容器
分隔器，
网格
标题，
形象
}来自“语义ui反应”；
导入“../css/app.css”；
类过滤器选项扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：this.props.data，
优先级：“”，
类别：“”，
选择：false，
};
this.handleChange=this.handleChange.bind（this）；
this.handleReset=this.handleReset.bind（this）；
}
handleReset（）{
这是我的国家({
数据：this.state.data，
});
}
手变（e）{
var val=e.目标值；
如果（！isNaN（val））{
这是我的国家({
优先权：val
});
}否则如果（伊斯南（瓦尔））{
这是我的国家({
类别：val
});
}
此.props.changeOption（val）；
}
render（）{
var重置；
如果（！this.state.data）{
重置=‘重置’；
}否则{
重置='不重置'；
}
报税表（<
div>
<
h5>按类别划分<
标签>
<
输入类型=“复选框”
onChange={
这是handleReset
}
/>
重置{
重置
} <
/标签><
h5>按类别划分<
ul>
<
李>
<
标签>
<
输入类型=“收音机”
value=“cat1”
选中={
this.state.category==='cat1'
}
onChange={
这是我的手机换
}
/>
第一类<
/标签><
/李><
李>
<
标签>
<
输入类型=“收音机”
value=“cat2”
选中={
this.state.category==='cat2'
}
onChange={
这是我的手机换
}
/>
第二类<
/标签><
/李><
李>
<
标签>
<
输入类型=“收音机”
value=“cat3”
选中={
this.state.category==='cat3'
}
onChange={
这是我的手机换
}
/>
第三类<
/标签><
/李><
/ul><
h5>按优先级排序<
ul>
<
李>
<
标签>
<
输入类型=“收音机”
value=“1”
选中={
this.state.priority==“1”
}
onChange={
这是我的手机换
}
/>
1 <
/标签><
/李><
李>
<
标签>
<
输入类型=“收音机”
value=“2”
选中={
this.state.priority==“2”
}
onChange={
这是我的手机换
}
/>
2 <
/标签><
/李><
李>
<
标签>
<
输入类型=“收音机”
value=“3”
选中={
this.state.priority==“3”
}
onChange={
这是我的手机换
}
/>
3 <
/标签><
/李><
李>
<
标签>
<
输入类型=“收音机”
value=“4”
选中={
this.state.priority==“4”
}
onChange={
这是我的手机换
}
/>
4 <
/标签><
/李><
/ul>{
/*按颜色









*/
} <
/div>
);
}
}
功能过滤器（道具）{
报税表（<
容器>
<
br/>
<
br/>
<
网格列={
3.
}
可堆叠的翻倍>{
props.data.map（（用户/*利用箭头函数隐式返回*/）=>（<
Grid.Column键={
用户名
} >
<
段类名称={
`优先级${user.priority}`
} >
<
卡片>
<
卡片内容>
<
卡片标题>
<
h2>名称：{
用户名
}<
/卡片标题><
Card.Meta>
<
span className=“卡龄”>年龄：{
用户年龄
}<
/Card.Meta><
卡片.说明>优先级：{
用户优先级
}<
卡片.说明className=“卡片分类”>类别：{
用户类别
}<
/卡片内容><
/卡片><
/段><
/网格.列>
))
} <
handleReset() {
  this.setState({
    data: this.state.data,
  });
}

handleReset() {
  this.setState({
    data: this.props.data,
  });
}

this.state = {
      data: this.props.data,
      priority: '',
      category: '',
    };

this.state = {
  data: props.data,
  initData: Object.assign({}, props.data),
  priority: '',
  category: ''
}

handleReset() {
  this.setState({
    data: Object.assign({}, this.state.initData)
  })
}

this.handleReset = this.handleReset.bind(this)

    <FilterOptions
        data={this.state.data}
        changeOption={this.handleChange}
        resetOption={this.handleReset}   />