javascript - 当我的状态改变时，我的 ReactJS 初始状态也会改变

Question

我有这样的东西:

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

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

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

我想通过使用initialState对象清除状态，但是当我尝试这样做时什么也没有发生。我注意到我的初始状态与我的状态采用相同的值，因此，当我执行其他函数来编辑状态时，我的初始状态也会发生变化。

有什么建议吗？ 顺便谢谢了

Answer 1

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

为了解决这个问题，您可以使用一个函数来创建一个新的初始状态供您使用，如下所示:

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

class Products extends Component {
    state = initialState();

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