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

【问题标题】：React redux state is changed but in component view it doesn't update the UIReact redux 状态已更改，但在组件视图中它不会更新 UI
【发布时间】：2020-09-29 21:30:32
【问题描述】：

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>
    );
}

}

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

【问题讨论】：

产品真的是数组吗？你有控制台记录这个吗？
是的，我将它们保存为一个数组。出口功能产品（状态= []，动作）{开关（action.type）{case PRODUCTS_TAB：state.push（action.payload）；返回状态；默认：返回状态 } }

标签： reactjs redux react-component

【解决方案1】：

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

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

【讨论】：