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

Question

我有这样的东西：

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

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

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

我想使用 initialState 对象清除状态，但是当我尝试这样做时没有任何反应。我注意到我的 initialState 与我的状态采用相同的值，因此，当我执行其他函数来编辑状态时，我的 initialState 也会改变。

有什么建议吗？顺便谢谢

Answer 1

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

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

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

class Products extends Component {
    state = initialState();

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

Answer 2

关于 javascript 对象，您需要了解的是，它们所有包含对象或数组的属性都只是引用...

这意味着如果您使用 rest 运算符简单地复制它，则产品数组在所有情况下都是相同的...

实现它的最佳方法是创建一个 return 初始状态的函数，或者粗鲁的 JSON.parse(JSON.stringify(initialState)).

Answer 3

根据 Zeeh 的回答，假设您正在使用功能组件，避免这 2 个变量被绑定的最佳方法是这样做：

const initialState = {foo: 'bar'}
const [state,setState] = useState(null)

useEffect(()=>{
  setState(JSON.parse(JSON.stringify(initialState)))
},[])

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

My ReactJS initialState change when my state changes

javascript

reactjs

frontend

state

react-state-management