使用 setState 設置 react 頁面的所有狀態

Question

我有一個頁面，我將在其中獲取頁面的整個狀態並使用一些本地存儲對其進行設置，因此我需要使用 SetState 但不能像理智的人那樣使用某些屬性

理智的人

this.setState({ 
  stateProperty:someValue
})

我（我想要達到的目標）

this.setState({
  this.state: {someValues}
})

Answer 1

不，你沒有。 對不起，你不能。 你已經接受了自己是理智的人喜歡的，但你為什么要嘗試瘋狂的代碼？

最好維護具有指定狀態的 localStorage 數據：

state = {
  storeData: {} // or, [], or whatever your stored data type
}
componentDidMount() {
  const storeData = JSON.parse(localStorage.getItem('store-data'))
  this.setState({
     storeData
  })
}

有些人可能會建議您直接在構造函數中初始化 localStorage 數據。 但我反對它，因為我不喜歡對組件造成一些副作用。

PS：實際上在構造函數中使用localStorage數據沒有副作用。 我剛剛建議使用componentDidMount鈎子，因為您可能需要調用一些 api 來調用加載localStorage數據，那時您可能會產生一些副作用。 要忽略這一點，請使用componentDidMount鈎子，因為它是一個在后台運行的異步函數。

Answer 2

要從 localStorage 設置/獲取狀態，請使用以下命令：

localStorage.setItem('store-state',JSON.stringify(this.state));
const storeState = JSON.parse(localStorage.getItem('store-state'));
this.setState(storeState);

使用此代碼，您可以從 localStorage 存儲/重新加載您的狀態。 注意，在 setState 中不需要創建任何對象（{}）。

Answer 3

也許你可以這樣做：

const updateState = window.localStorage.getItem('whatever');
let newState = Object.assign({}, this.state);
newState = updateState;
this.setState({newState});

希望它有效。

Answer 4

看起來您實際上可以在構造函數上調用 this.state={something}

這成功了

constructor(props) {
        super(props);

          if ( typeof store.get([store.get("auth").ID]) === "undefined") {
              store.set([store.get("auth").ID], { localStorageData: {} });
          }

          this.state = {
              ...bla bla bla
          }

          this.state=Object.assign({}, this.state, this.state.localstore ) 
   }