Question

如何确保触发状态更改并将其捕获到组件中？

我的应用程序有一个操作，该操作在过滤器组件中单击时触发。此过滤器会搜索并返回新产品（基于过滤器）。

该操作有效且使用React Chrome扩展程序，我可以看到产品的全局状态发生变化。但是，我无法在shopComponent中获取新状态，这将根据新产品状态更改显示的产品.. :(

class shopProduct extends Component {

    constructor(props) {
        super(props);
        this.state = {...localStateItems }
    }

    render() {
        if(this.props.products != undefined) {
          console.log('not undefined: ', this.props.products);
          // NOTHING IS SHOWING
        }
        console.log('shopProducts Render: ', this.props);
        // NOTHING IS SHOWING

        return (
            ...Some new products
        )
    }
}

const mapStateToProps = (state, ownProps) => ({
    cart: state.cart,
    products: state.products
});

shopProduct.propTypes = {
    productSearch: PropTypes.func.isRequired,
    products: PropTypes.object
};

export default connect(mapStateToProps, { productSearch, products })(shopProduct);

我是否正确地将其映射到shopProduct组件？

Answer 1

我认为您误解了传递给connect的第二个参数应该是什么。根据{{3}}，它应该mapDispatchToProps。您试图传递propTypes，这不是第二个参数所期望的。您可能需要阅读the docs。

Answer 2

行。所以它没有呈现的原因是我们使用不可变的JS 所以对于有问题的其他人。检查您的应用是否正在使用该应用。

只需使用<script> var countdown = new Date("May 28, 2018 12:00:00").getTime(); var x = setInterval(function(){ var now = new Date().getTime(); var distance = countdown - now; var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)); var minutes = Math.floor(distance % (1000 * 60 * 60) / (1000 * 60)); var seconds = Math.floor(distance % (1000 *60) / 1000); document.getElementById("timer").innerHTML = "D " + days + " H " + hours + " M " + minutes + " S " + seconds; },1000) if(distance < 0){ clearInterval(x); document.getElementById("timer").innerHTML = "EXPIRED"; } </script> <div id="timer" class="timer"></div>

引用该对象即可

右：

state.get('objectName')

-

错误：

const mapStateToProps = (state) => ({
   products: state.get('products')
});

React Redux组件不会在状态更改时重新呈现

2 个答案: