Javascript 如何返回到React上状态的第一次出现

单击“重置”时，我想使页面第一次出现。 当我首先单击“重置”时，它将重置为第一个外观。 但是，当我再次更改obj1状态并单击“重置”时，它不会返回。 相反，将引用obj1

我的问题是,

“handleReset”函数有什么问题？为什么不能由obj2更新

如何使页面成为第一个没有任何更改的状态，而不是使用window.location.reload（）？我正在考虑将obj1保持在某个变量中，当调用handleReset时，它可以提供obj1状态。但我不知道如何实现这一点

我正在使用React开发工具，但发生了未捕获的错误。是什么引起的

*显示obj1.id和obj1.num的第一个外观。

*当我再次更改obj1状态并单击“重置”时，它不会返回。 相反，将引用obj1。

*未捕获错误：无法添加节点“1”，因为具有该id的节点已在存储中。

应用程序类（父级）

类应用程序扩展组件{
状态={
obj1：[
{id:1，num:0}，
{id:2，num:1}，
{id:3，num:2}，
],
obj2：[
{id:1，num:0}，
{id:2，num:1}，
{id:3，num:2}，
],
};
handleReset=（）=>{
常量obj2=[…this.state.obj2]；
this.setState（{obj1:obj2}）；
};
handleDelete=（id）=>{
console.log（“id”，id）；
const obj1=this.state.obj1.filter（（obj）=>obj.id！==id）；
这个.setState（{obj1}）；
};
handleIncrement=（计数器）=>{
const temState=[…this.state.obj1]；
temState[counter-1].num++；
this.setState（{obj1:[…temState]}）；
};
render（）{
返回(
);
}
}

计数器类（应用程序类的子类）

类计数器扩展组件{
render（）{
返回(
重置
{this.props.obj1.map（（obj）=>(
))}
);
}
}

计数器类（由计数器类控制）

类计数器扩展组件{
render（）{
返回(
{this.props.counter.num}
this.props.handleIncrement（this.props.counter.id）}
className=“徽章bg次要m-2”
>
按钮
this.props.handleDelete（this.props.counter.id）}
className=“徽章背景危险m-2”
>
删除
);
}
}

问题在于如何将obj2的属性复制到HandlerReset中的obj1中。此链接说明如何复制对象数组

您还需要复制obj2中的对象。 请参阅下面的代码片段：

  handleReset = () => {
    const { obj2 } = this.state;
    const obj1 = obj2.map((item) => ({ ...item }));
    this.setState({ obj1 });
 };

检查工作代码段

---

此外，我无法重现您面临的错误。事情似乎进展顺利。

谢谢你的片段！现在我可以将页面作为第一个条件，这是我想要做的。另外，如果我在构造函数中使用map，我可以删除obj2，这使代码更干净。构造函数（）{super（）；const{obj1}=this.state；this.objClone=obj1.map（（项）=>（{…项}））；}关于错误，我的React版本是17.0.2，可能与此相关。

class Counters extends Component {
  render() {
    return (
      <div>
        <span onClick={this.props.onReset} className="badge bg-primary m-2">
          Reset
        </span>
        {this.props.obj1.map((obj) => (
          <Counter
            key={obj.id}
            //props
            handleIncrement={this.props.onHandleIncrement}
            handleDelete={this.props.onHandleDelete}
            counter={obj}
          />
        ))}
      </div>
    );
  }
}

class Counter extends Component {
  render() {
    return (
      <div>
        <span className="badge bg-primary">{this.props.counter.num}</span>
        <button
          onClick={() => this.props.handleIncrement(this.props.counter.id)}
          className="badge bg-secondary m-2 "
        >
          BUTTON
        </button>
        <span
          onClick={() => this.props.handleDelete(this.props.counter.id)}
          className="badge bg-danger m-2"
        >
          DELETE
        </span>
      </div>
    );
  }
}

  handleReset = () => {
    const { obj2 } = this.state;
    const obj1 = obj2.map((item) => ({ ...item }));
    this.setState({ obj1 });
 };