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

也许您可以执行以下操作：

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

希望它能起作用。

Answer 3

看起来您实际上可以在构造函数上调用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 ) 
   }

Answer 4

要从localStorage设置/获取状态，请使用以下命令：

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

使用此代码，您可以从localStorage存储/重新加载状态。注意，在setState中无需创建任何对象（{}）。

使用setState设置反应页面的所有状态

4 个答案: