javascript - 当我的状态改变时，我的ReactJS initialState改变

我有类似的东西：

const initialState={
 hide: true
 product:[
         {name: ''
          price: ''},
          {name: ''
          price: ''},
          {name: ''
          price: ''},
         ]
}

class Products extends Component {
  state = { ...initialState }

}
clearState = () =>{
  this.setState({...initialState})
}

我想通过使用initialState对象清除状态，但是当我尝试执行此操作时，没有任何反应。我注意到我的initialState与状态使用相同的值，因此，当我执行其他功能来编辑状态时，initialState也将更改。

有什么建议吗？
顺便谢谢

最佳答案

您的初始状态仍在存储对该数组的引用，这意味着，如果您在其他任何地方更改该数组，它将在所有地方更改。

为了解决这个问题，您可以使用一个函数，该函数将创建一个新的initialState供您使用，如下所示：

const initialState = () => {
    return {
        hide: true,
        product: [
            {name: '', price: ''},
            {name: '', price: ''},
            {name: '', price: ''},
        ]
    };
};

class Products extends Component {
    state = initialState();

    clearState = () =>{
        this.setState(initialState());
    }
}