У меня есть следующая кнопка «Купить» для корзины.
У меня также есть компонент под названием Tooltip, который будет отображаться для сообщений об ошибках/успехах. Он использует ширину кнопки, чтобы определить ее центральную точку. Следовательно, я использую `ref, так как мне нужно получить доступ к его физическому размеру в DOM. Я читал, что использование атрибута ref — плохая новость, но я не уверен, как еще можно выполнить позиционирование дочернего компонента, основанного на физическом DOM. Но это уже другой вопрос... ;)
Я сохраняю состояние приложения в localStorage. Как видно здесь: https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage
Проблема, с которой я сталкиваюсь, заключается в том, что перед рендерингом мне нужно очистить свойство success состояния. В противном случае, если у меня есть сообщение об успехе в состоянии, при начальном рендеринге () 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)