为什么redux-sessionstorage在恢复状态时不更新节点的属性？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么redux-sessionstorage在恢复状态时不更新节点的属性？相关的知识，希望对你有一定的参考价值。
我使用redux-sessionstorage将应用程序状态的子集存储到会话存储中。该状态的一部分指示UI中的某些面板是展开还是折叠（可见或隐藏）。
我有一个示例应用程序正好再现：https://github.com/shawninder/sessionstorage-bug
有关完整的复制步骤，请参阅自述文件。
也在网上主持here（给它一点时间解冻）
重新加载页面时会出现问题。 redux-sessionstorage正确地从sessionstorage恢复先前的状态并触发渲染，但我用来隐藏和显示的样式属性不会更新。
换句话说，这可以按预期工作：
<p>showNotice: {props.app.showNotice ? 'true' : 'false'}</p>
我可以在页面加载时看到showNotice: false，但是当redux-sessionstorage恢复保存状态时，它会立即被showNotice: true替换。
但以下不起作用：
<div
className='notice'
style={{
opacity: props.app.showNotice ? 1 : 0,
transform: props.app.showNotice ? 'translateX(0)' : 'translateX(-100%)'
}}
>
Notice!
</div>
页面加载时隐藏了通知（如预期的那样），但是当redux-sessionstorage恢复状态时，它不会显示。实际上，直到我单击两次切换按钮，第一次将showNotice设置回false，然后第二次将其设置为true并显示<div>时才会显示。
为什么redux-sessionstorage不会在这里更新style属性，人们通常如何处理这个？
@lecstor指出了关于这个问题的正确线索。
这是服务器端渲染（SSR）的一个问题。 Dan Abramov在这个comment上描述的解决方法解决了这个问题。
您正在使用Next.js进行SSR。在dev模式下运行项目时，在按Toggle to true并重新加载后，您可以在Chrome控制台上看到以下错误消息：
Warning: Text content did not match. Server: "false" Client: "true"
由于Next对客户端保存状态一无所知，因此总是将app.showNotice返回给false。您还可以在Chrome网络标签上查看GET localhost的返回内容。
显然Next.js尝试合并从服务器返回的内容和本地呈现的内容，但无法合并样式。显然，它是Next和React 16 SSR上的预期行为，您可以通过触发第二个render()或执行下面的实现来克服。
class App extends Component {
constructor(props) {
super(props);
this.state = { showNotice: false };
}
componentDidMount() {
this.setState({ showNotice: this.props.app.showNotice });
}
componentWillReceiveProps(props) {
this.setState({ showNotice: props.app.showNotice });
}
render() {
return (
<div>
<p>showNotice: {this.state.showNotice ? 'true' : 'false'}</p>
<button onClick={(event) => {
this.props.dispatch({ type: 'App:toggleNotice' })
}}>toggle</button>
<div
className='notice'
style={{
opacity: this.state.showNotice ? 1 : 0,
transform: this.state.showNotice ? 'translateX(0)' : 'translateX(-100%)'
}}
>
Notice!
</div>
<style jsx>{`
.notice {
width: 100px;
transition-property: opacity, transform;
transition-duration: 0.4s;
}
`}</style>
</div>
)
}
}以上是关于为什么redux-sessionstorage在恢复状态时不更新节点的属性？的主要内容，如果未能解决你的问题，请参考以下文章
什么是密钥哈希？为什么需要它？它是唯一的吗？为什么 Facebook 集成需要它
Redis 为什么面试都问我却不懂？因为它快吗？它为什么快？