在渲染组件之前清除特定的redux状态

Question

我有一个购物车的“购买”按钮。

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

我在localStorage中坚持应用程序的状态。 如下所示： https ： //egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

我遇到的问题是我必须在渲染之前清除状态的success属性。 否则，如果我在状态中有成功消息，则在初始render（）上， Tooltip也将尝试渲染。 这是不可能的，因为它依赖的按钮还没有在DOM中。

我认为通过componentWillMount Redux操作清除成功状态会清除成功状态并因此清除问题，但似乎render（）方法无法识别状态已更改并仍将显示旧状态console.log（）中的值。

我的解决方法是检查按钮是否存在以及成功消息： showSuccessTooltip && this.addBtn

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

这是ProductBuyBtn.js类：

 import React, { Component } from 'react'; import { connect } from 'react-redux' // Components import Tooltip from './../utils/Tooltip' // CSS import './../../css/button.css' // State import { addToCart, clearSuccess } from './../../store/actions/cart' class ProductBuyBtn extends Component { componentWillMount(){ this.props.clearSuccess() } addToCart(){ this.props.addToCart(process.env.REACT_APP_SITE_KEY, this.props.product.id, this.props.quantity) } render() { let showErrorTooltip = this.props.error !== undefined let showSuccessTooltip = this.props.success !== undefined console.log(this.props.success) return ( <div className="btn_container"> <button className="btn buy_btn" ref={(addBtn) => this.addBtn = addBtn } onClick={() => this.addToCart()}>Add</button> {showErrorTooltip && this.addBtn && <Tooltip parent={this.addBtn} type={'dialog--error'} messageObjects={this.props.error} /> } {showSuccessTooltip && this.addBtn && <Tooltip parent={this.addBtn} type={'dialog--success'} messageObjects={{ success: this.props.success }} /> } </div> ); } } function mapStateToProps(state){ return { inProcess: state.cart.inProcess, error: state.cart.error, success: state.cart.success } } const mapDispatchToProps = (dispatch) => { return { addToCart: (siteKey, product_id, quantity) => dispatch(addToCart(siteKey, product_id, quantity)), clearSuccess: () => dispatch(clearSuccess()) } } export default connect(mapStateToProps, mapDispatchToProps)(ProductBuyBtn) 

Answer 1

好吧，它似乎是一个很容易进入的已知问题（更难以摆脱，特别是以一种漂亮/非黑客的方式。看到这个超长线程 ）。

问题是在componentWillMount中调度（ 最终 ）更改进入组件的props的操作并不能保证在第一次渲染之前发生了操作。

所以基本上render()不会等待你的调度动作生效，它渲染一次（使用旧道具），然后动作生效并更改道具， 然后组件使用新道具重新渲染。

所以你要么必须做你已经做过的事情，要么使用组件内部状态来跟踪它是否是第一个渲染，就像这个评论 。 概述了更多建议，但我无法列出所有建议。