反応のためにローカルストレージに状態を保存する方法は？

Question

私は自分のチェックボックスの値を自分の反応アプリのlocalstorageに保存しようとしています。しかし、私が保管するたびに、以前の状態を保存します。以下は私のコードです：

ためのサイドレンダリング：のonchange方法について

render() { 
    return (
         <Checkbox 
         checked={this.state.checkedCheckpoint} 
         onChange={() => this.onChange('checkpoint')} 
         > 
         </Checkbox> 
     ) 

を：私は前の状態により何を意味

onChange (value){ 
    const { checkedCheckpoint } = this.state 

    if (value === 'checkpoint') 
    { 
     if (checkedCheckpoint) 
     { 
     this.setState({checkedCheckpoint : false}) 
     console.log(checkedCheckpoint) 
     } 
     else 
     { 
     this.setState({checkedCheckpoint : true}) 
     console.log(checkedCheckpoint) 
     } 
    } 
    localStorage.setObject('checkedCheckpoint', checkedCheckpoint) 

は次のとおりです。 私は真実であると私のチェックポイントを初期化する場合は、私がチェックを外した後、私はcheckpoint: falseの権利を得なければなりませんか？しかし、私はcheckedCheckpoint: trueを得ます。私がそれを確認したら、checkedCheckpoint: trueを正しく取得する必要がありますか？私はcheckedCheckpoint: falseを得るでしょう。ローカルストレージの前の状態に常に従うように見えます。誰が何が間違っているか知っていますか？あなたはあなたがthis.setState（2番目argrumentとしてポスト状態変化を実行するために好きなロジック渡す必要があり、古いもの

onChange (value){ 
    const { checkedCheckpoint } = this.state 

    if (value === 'checkpoint') 
    { 
     if (checkedCheckpoint) 
     { 
     this.setState({checkedCheckpoint : false}) 
     localStorage.setObject('checkedCheckpoint', false) 
     console.log(checkedCheckpoint) 
     } 
     else 
     { 
     this.setState({checkedCheckpoint : true}) 
     localStorage.setObject('checkedCheckpoint', true) 
     console.log(checkedCheckpoint) 
     } 
    } 

Answer 1

ReactはsetStateコマンドをバッチしようとします。これは、非同期タスクによく似ています。したがって、this.setState（{checkedCheckpoint：true}）を実行すると、reactに「checkedCheckpoint」の状態をtrueに設定するように通知するだけですが、その時点でそのコマンドは実行されません。したがって、基本的にlocalStorage変数を設定しようとしているときは、以前の状態です。

このような変数に新しい状態を設定してみてください。

<Checkbox 
    checked={this.state.checkedCheckpoint} 
    onChange={() => this.setState((prevState) => ({checkedCheckpoint: !prevState.checkedCheckpoint}), 
    () =>{console.log(this.state.checkedCheckpoint)})} 
> 
</Checkbox>   

また、あなたのコードに問題がでstateがSETSTATEが非同期起こる反応していること、それは事実を考慮していないということでした。

onChange (value){ 
var newState; 
const { checkedCheckpoint } = this.state 

if (value === 'checkpoint') { 
    if (checkedCheckpoint) { 
    newState = false; 
    console.log(newState); 
    } 
    else { 
    newState = true; 
    console.log(newState); 
    } 
    this.setState({checkedCheckpoint : newState}); 
    localStorage.setObject('checkedCheckpoint', newState); 
} 

Answer 2

）

例：

state = { 
    name: 'Johnny' 
} 

someMethod =() => { 
    this.setState({name: 'Tim'}) 
    doSomethingElse(this.state.name) //doSomethingElse receives Johnny 
} 

私は何を探していることは

だと思います

setState hereのドキュメントを参照してください。

Answer 3

新しい値に基づいて、それを設定する必要はありません

Answer 4

おそらく、あなたは、このような何かを行うことができます。その結果、ロギング中は常に前の状態が表示されます。