编辑：

Question

我刚刚了解到，在功能组件中，我可以使用useEffect来监视任何副作用（例如，使用localStorage时），以确保我的状态与效果挂钩。

我希望在localStorage的基于类的组件中具有类似的功能。 localStorage发生变化时，如何确定自己的状态会自动更新？

Answer 1

这就是我的方法。

class Login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            // Get value from localStorage or use default
            isLoggedIn: localStorage.getItem('isLoggedIn') || 0
        }

        // Listen to storage event
        window.addEventListener('storage', (e) => this.storageChanged(e));

        // Bind this to storageChanged()
        this.storageChanged = this.storageChanged.bind(this);
    }

    storageChanged(e) {
        if(e.key === 'isLoggedIn') {
            this.setState({isLoggedIn: e.newValue})
        }
    }

    render() {
        return <p>{this.state.isLoggedIn}</p>
    }
}

这就是我可以使用基于类的组件来对localStorage进行更改的方法。

Answer 2

您可以尝试使用钩子来检查localStorage的变化，例如docs中的变化。

useEffect(() => {

    function checkStorage(e){
        if('keyStateYouWantToSync' == e.key && stateYouWantToSync != JSON.parse(e.newValue)){
            setStateYouWantToSync(JSON.parse(e.newValue))
        }
    }

    window.addEventListener('storage', checkStorage)
    return () => window.removeEventListener('storage', checkStorage)
})

您还可以将key的检查更改为要检查的key。

编辑：

对于类组件

checkStorage = (e) => {
    if('keyStateYouWantToSync' == e.key && this.state.stateYouWantToSync != JSON.parse(e.newValue)){
        this.setState({stateYouWantToSync: JSON.parse(e.newValue)})
    }
}

componentDidMount(){
    window.addEventListener('storage', this.checkStorage)
}

componentWillUnmount(){
    window.removeEventListener('storage', this.checkStorage)
}

useEffect替代Class Component

2 个答案:

编辑：