Question

主要问题：两个组件已连接到Redux存储。状态改变时，一个组件会重新渲染，而另一组件则不会。

我正在使用react-redux。我有一个名为CART的父组件和两个孩子：

过滤器，代表div，用户可以在其中选择不同的条件（颜色，大小，性别...）
产品，代表鞋子列表

CART.jsx

render() {
    console.log(this.props.filterCart, 'CART')
    const { products, error, pending } = this.props.products
    if (!this.shouldComponentRender()) return <LoadingSpinner />
    return (
        <section className="products_container">
            <Filter />
            {!this.shouldComponentRender() ? (
                <LoadingSpinner />
            ) : (
                <Products
                    products={products}
                    filterCart={this.props.filterCart}
                />
            )}
            {this.props.filterCart[0].value.length > 0 && <h1> hello </h1>}
        </section>
    )
}

const mapStateToProps = state => {
    return {
        products: state.products,
        filterCart: state.filter
    }
}

我的CART组件和过滤器组件已连接到我的Redux存储。每次用户在“过滤器”组件中选择一个条件时，它都会在化简器中分派和更新。我的调度在“过滤器”组件中设置。

我将console.log(this.props.filterCart)放入了CART和Filter组件的render()中。我注意到的是，每次选择一个条件时，我的“过滤器”组件都会记录更改，而CART组件则不会。 CART仅渲染一次日志，并且输出是一个空对象。进行更改后，CART似乎没有更新。

对于第二个测试，我将其放入了CART＆Filter：

{this.props.filterCart[0].value.length > 0 && <h1> hello </h1>}

每当选择一个条件时，当条件已添加到初始空数组时，我的过滤器就会显示"hello"，但CART不会。{p>

我做了一些研究，显然这可能是由于我可以修改减速器的初始状态，这是错误的。但是，我不确定，因为过滤器会对更改做出反应。

这是我的减速器代码：

Reducer.js

let filterCriteria = [
    {
        field: 'gender',
        value: []
    },
    {
        field: 'color',
        value: []
    }
]

const filter = (state = filterCriteria, action) => {
    switch (action.type) {
        case FILTER_CRITERIA.FILTER_PRODUCTS_BY_GENDER:
            if (action.indice === true) {
                state[0].value = state[0].value.concat(action.value)
            } else {
                state[0].value = state[0].value.filter(
                    element => element != action.value
                )
            }
            break

        case FILTER_CRITERIA.FILTER_PRODUCTS_BY_COLOR:
            if (action.indice === true) {
                state[1].value = state[1].value.concat(action.value)
            } else {
                state[1].value = state[1].value.filter(
                    element => element != action.value
                )
            }
            break
    }
    return state
}

精确地说：当在过滤器（选中输入框）中选择了一个条件时，该条件就会添加到相应的字段中。当我取消选中该框时，它将返回没有期望值的过滤器。因此，我对我的减速器没有任何担心。

我的问题是为什么我的第二个组件不重新渲染。

您知道什么地方可能出问题吗？

非常感谢您！

Answer 1

嘿，请检查此代码和框

React Redux example

在Redux中过滤对象数组

1 个答案: