5

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

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

我将应用程序的状态保存在 localStorage 中。如此处所示： https ://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

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

我认为通过 Redux 操作清除成功状态componentWillMount会清除成功状态并因此解决问题，但似乎 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)

4

1 回答 1

4

好吧，这似乎是一个很容易解决的已知问题（更难摆脱，特别是以一种不错/非 hacky 的方式。请参阅这个超长线程）。

componentWillMount问题是在那个（最终）中调度一个动作会改变进入组件的道具并不能保证该动作在第一次渲染之前已经发生。

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

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

于 2017-08-31T20:37:24.737 回答