Javascript 当我重定向到另一个页面时，本地存储已损坏

我正在构建一个JS应用程序。 在本地存储中，我使用init color=red，当我点击一个按钮时，我将更改为color=green，然后重定向到PageB。当我在PageB上时，我试图获得颜色，但它返回红色。它应该是绿色的

class PageA extends Component {
    ...
    handleSubmit(event) {
        event.preventDefault();
        localStorage.setItem('color', 'green');
        window.location.pathname = '/pageb';
    }

    render() {
        localStorage.setItem('color', 'red');
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <button type='submit'>Go</button>
                </form>
            </div>
        );
    }
}

function PageB() {
    console.log(localStorage.getItem('color'));
    return (
        ...
    );
}

类PageA扩展组件{
...
handleSubmit（事件）{
event.preventDefault（）；
setItem（'color'，'green'）；
window.location.pathname='/pageb'；
}
render（）{
setItem（'color'，'red'）；
返回(
去
);
}
}
函数PageB（）{
log（localStorage.getItem（'color'））；
返回(
...
);
}

如果您在PageB中使用console.log，它将引发意外的令牌异常，要解决此问题，您可以使用下面的代码片段或访问JSFIDLE（）：

类PageA扩展了React.Component{
handleSubmit（事件）{
event.preventDefault（）；
setItem（'color'，'green'）；
window.location.pathname='/pageb'；
}
render（）{
setItem（'color'，'red'）；
返回(
去
);
}
}
类PageB扩展了React.Component{
componentDidMount（）{
console.log（localStorage.getItem（'color'））
}
render（）{
返回(
你好
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
您的
render（）
方法不应该有写入存储等副作用。使用React，您无法真正控制调用它的时间。如果您只需要将
颜色设置为红色一次，请在
componentDidMount（）
或组件的构造函数中执行。在PageA组件中感谢您，我刚刚将写入内容从render（）移动到本地存储中方法并将其放入构造函数中，它解决了我的问题