Sử dụng LocalStorage với React?

Question

Từ những gì tôi đang trải qua cho đến nay, nó không giống như các bản cập nhật ReactJS với trạng thái của localStorage. Mã của tôi dưới đây.

var Frr = React.createClass({ 
getInitialState: function(){ 
return { lights: localStorage.getItem('state')} 
}, 

switchoff: function(){ 
this.setState({lights: localStorage.setItem('state', 'off')}); 
}, 

switchon:function(){ 
this.setState({lights: localStorage.setItem('state', 'on')}); 
}, 

render:function(){ 
if (this.state.lights === 'on'){ return (
<div> 
<p>The lights are ON</p> 
<input type="submit" value="Switch" onClick={this.switchoff}/> 
</div> 
);} 

if ((this.state.lights === 'off')|| (!this.state.lights)){ return (
<div> 
<p>The lights are OFF</p> 
<input type="submit" value="Switch" onClick={this.switchon}/> 
</div> 
);} 


} 
}); 

Ứng dụng đơn giản. Nếu trạng thái của localstorage bị tắt hoặc rỗng, sau đó hiển thị khung nhìn bằng nút BẬT. Nếu localstorage bật, sau đó hiển thị chế độ xem bằng nút TẮT.

Tôi muốn có thể đặt kết xuất này dựa trên trạng thái của localStorage. Tôi đã thử làm điều tương tự bằng cách sử dụng boolean cơ bản, và nó hoạt động như mong đợi. Tuy nhiên, khi sử dụng localStorage, có điều gì đó không hoạt động.

Tôi sẽ không ngạc nhiên nếu logic của tôi chỉ đơn giản là tắt.

EDIT: Để giải thích, nút và chế độ xem không hoạt động như mong muốn. Khi đèn tắt và không có gì trong Bộ nhớ, nút thêm BẬT vào localStorage, nhưng không thay đổi chế độ xem. Nếu tôi làm mới trang, trang sẽ hiển thị BẬT và khi tôi nhấp vào nút đó, nút sẽ hoạt động bằng cách TẮT. Nhưng nó chỉ hoạt động một lần, dẫn tôi tin rằng có thể có một vấn đề với công tắc OFF.

Answer 1

Chức năng lưu trữ cục bộ .setItem() trả về undefined. Bạn cần phải thực hiện việc cập nhật lưu trữ địa phương và sau đó trở về đối tượng trạng thái mới:

switchoff: function(){ 
    localStorage.setItem('state', 'off'); 
    this.setState({lights: 'off'}); 
}, 

Answer 2

Dưới đây chỉ là một ví dụ:

import React from 'react' 
class App extends React.Component { 
    constructor(props) { 
    super(props); 
    var storedClicks = 0; 

    if (localStorage.getItem('clicks')) { 
     storedClicks = parseInt(localStorage.getItem('clicks')); 
    } 

    this.state = { 
     clicks: storedClicks, 
    }; 
    this.click = this.click.bind(this); 
    } 

    click() { 
    var newclick = this.state.clicks + 1; 
    this.setState({clicks: newclick}); 
    // Set it 
    localStorage.setItem('clicks', newclick); 
    } 

    render() { 
    return (
     <div> 
     <h2>Click the button a few times and refresh page</h2> 
     <button onClick={this.click}>Click me</button> Counter {this.state.clicks} 
     </div> 
    ); 
    } 
} 
export default App;