React redux 状态已更改，但在组件视图中它不会更新 UI

Question

const mapStateToProps = state => {
return {
    products: state.priceTabProducts
  };
};

class App extends Component {

render() {
    return (
        <div>
            <Layout>
                <Route path="/:product" component={ProductsPage}/>
                <ProductsTab
                    show={this.props.showPriceTab}
                    quantity={this.props.products.length}
                />
            </Layout>
        </div>
    );
}

}

我改变了状态，它工作得很好，我想将长度传递给组件，但它并没有改变它的值。我该如何解决这个问题？

Answer 1

问题是您改变了状态，因为如果引用没有改变，将不会触发重新渲染。您应该改用 concat 来更新数组

export function priceTabProducts(state = [], action) { 
   switch (action.type) { 
       case PRICE_TAB_PRODUCTS: return state.concat(action.payload);
       default: return state 
   } 
}

React redux 状态已更改，但在组件视图中它不会更新 UI

React redux state is changed but in component view it doesn't update the UI

reactjs

redux

react-component