Javascript 在呈现组件之前清除特定的重复使用状态

我有以下购物车的“购买”按钮

我还有一个名为Tooltip的组件，它会自动显示错误/成功消息。它使用按钮的宽度来确定其中心点。因此，我使用'ref，因为我需要在DOM中访问它的物理大小。我已经读到使用ref属性是个坏消息，但我不确定如何定位基于物理DOM的子组件。但这是另一个问题……；）

我正在本地存储中持久化应用程序的状态。如图所示：

我遇到的问题是，在渲染之前必须清除状态的

success

属性。否则，如果在状态中有一条成功消息，则在初始渲染（）时，

工具提示也将尝试渲染。这是不可能的，因为它所依赖的按钮还不在DOM中

我认为通过组件中的Redux操作清除成功状态将清除成功状态，从而解决问题，但render（）方法似乎无法识别状态已更改，并且仍将在console.log（）中显示旧值

我的工作是检查按钮是否存在以及成功消息：
showsccesstooltip&&this.addBtn

为什么render（）无法识别componentWillMount（）状态更改

以下是ProductBuyBtn.js类：


import React，{Component}来自'React'；
从“react redux”导入{connect}
//组成部分
从“/../utils/Tooltip”导入工具提示
//CSS
导入“./../css/button.css”
//陈述
从“/../../store/actions/cart”导入{addToCart，clearSuccess}
类ProductBuyBtn扩展组件{
组件willmount（）{
this.props.clearSuccess（）
}
addToCart（）{
this.props.addToCart（process.env.REACT\u APP\u SITE\u KEY、this.props.product.id、this.props.quantity）
}
render（）{
让工具提示=this.props.error！==未定义
让showSuccessTooltip=this.props.success！==未定义
console.log（this.props.success）
返回(
this.addBtn=addBtn}onClick={（）=>this.addToCart（）}>Add
{工具提示&&this.addBtn&&
}
{showsuccestooltip&&this.addBtn&&
}
);
}
}
函数MapStateTops（状态）{
返回{
inProcess:state.cart.inProcess，
错误：state.cart.error，
成功：state.cart.success
}
}
const mapDispatchToProps=（调度）=>{
返回{
addToCart：（站点密钥，产品标识，数量）=>调度（addToCart（站点密钥，产品标识，数量）），
clearSuccess:（）=>分派（clearSuccess（））
}
}
导出默认连接（mapStateToProps，mapDispatchToProps）（ProductBuyBtn）
好吧，这似乎是一个很容易解决的已知问题（很难解决，尤其是以一种友好/非黑客的方式。请参阅）

问题在于，在
组件中调度动作将装载（最终）更改组件中的道具，这并不保证动作在第一次渲染之前发生

因此，基本上，
render（）
不会等待您分派的操作生效，它只渲染一次（使用旧道具），然后操作生效并更改道具，然后组件使用新道具重新渲染

所以你要么做你已经做过的事情，要么使用组件内部状态来跟踪它是否是第一次渲染，比如。还有更多的建议，但我不能一一列举。
谢谢。我不确定是否有“最佳实践”。您陈述了我对该问题的最初想法，即组件在状态实际更改之前呈现。但这很奇怪，因为我在reducer中做了一个console.log来查看它何时启动，而且似乎是在渲染之前发生的。我想这是骗人的，没问题！我应该说我不是Redux专家，所以我建议至少浏览一下我链接的线程，以确保我没有歪曲内容。但我确实记得以前遇到过类似的情况（我不记得他们曾经得到过干净的解决方案）。如果用其他方式构建应用程序可以避免这个问题，我也不会感到太惊讶，但我不知道该怎么做（据我所知，帖子中的人也不知道，或者至少没有达成一致意见）。我很快浏览了你发布的帖子（谢谢！）。似乎每个人都在做一些变通。也许他们实际上不是在工作，因为这只是工作的方式；）这是其中一次，我很高兴每个人都有这个问题，这不是我是一个跛脚的开发人员。哈哈，我知道这种感觉：）我只是把自己逼疯了几个小时，然后我决定在改变路线之前清理整个州。这就解决了问题，但是有问题。