使用 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 ) 
   }