reactjs – 当Redux状态更改为低于第一级时,React不会更新

发布时间：2020-12-15 20:20:49 所属栏目：百科来源：网络整理

导读：我在Redux中拥有自己的状态,并且正在使用react-redux连接器将其绑定到我的React应用程序中.在设置状态的初始运行期间,连接工作很好.但是,当我更新我的reducer中的一部分状态时,React没有读取它的更改,因此组件不会再次渲染.当我做一些强制渲染的其他动作时,

我在Redux中拥有自己的状态,并且正在使用react-redux连接器将其绑定到我的React应用程序中.在设置状态的初始运行期间,连接工作很好.但是,当我更新我的reducer中的一部分状态时,React没有读取它的更改,因此组件不会再次渲染.当我做一些强制渲染的其他动作时,状态实际上已经改变了.

它似乎与未被识别为已更改的状态有关,并且在react-redux的wrapWithConnect方法中,storeChanged和propsChanged在初始运行后都评估为false.一个线索可能是反应 – 还原在这些检查中的浅层比较.

问题是“当Redux中的状态发生变化时,我需要做些什么才能让React显示对状态的更改”？

国家的相关部分如下

let thisOrder = Immutable.fromJS( {
"projectNumber": '',"orderHeader": {
    "order_id": "","firstname": "","lastname": "","address1": "",),"orderProducts": [],"lastOperation": ''} );

更新的部分是orderProducts,这是一组基本上看起来像的产品

orderProducts:[{productSKU:'Y54345',productDesc:'What it is',price:"4.60",qty:2},{productSKU:'Y54345',productDesc:'What what is',price:"9.00",qty:1}]

当更新下面的reducer中的qty或price(由动作调用)时,结果newState具有更改

case OrderConstants.ORDER_PRODUCT_UPDATE:{

 let productList = updateProductList( action.updateProduct,state.get(
 'orderProducts' ))

 let newState = state.update( 'orderProducts',productList).set('lastOperation',action.type);

  return newState;}

最后,控制React组件然后向下游发送道具

render: function () {
        return (
            <div>
                <ProductList updateOrder={this.updateOrder()} products={this.props.products}/>

                    {this.submitContinueButton()} {this.submitButton()}
                    {this.cancelButton()}
                </div>
            </div>
        )
    }
} );
// connect to Redux store
var mapStateToProps = function ( state ) {
    return { ocoStore: state.toJS(),products: state.get('orderProducts')};
};

export default connect( mapStateToProps )( OrderProducts );

以上所有内容均已修改为相关部分.请注意,该代码用于在初始加载时显示较低组件的产品信息.在更新价格或数量时,不会发生刷新.

解决方法

我已经使用JSBIN复制了你的解决方案,我设法让它工作,所以我想我会分享,以防它以任何方式帮助你.

下面是JSBIN中的代码.它基于您问题中的代码段.请注意,您没有提供updateProductList方法的代码和ProductList组件的代码,因此我必须创建自己的代码.

const initialState = Immutable.fromJS({
  "projectNumber": '',},"orderProducts": [
    { 
      productSKU: 'Y54345',productDesc: 'What it is',price: "4.60",qty:2
    },{
      productSKU: 'Y54346',productDesc: 'What what is',qty:1
    }
  ],"lastOperation": ''
});


const updateProductList = (updateProduct,productList) => {
  return productList.map(product => {
    if (product.get('productSKU') === updateProduct.productSKU) {
      return Immutable.fromJS(updateProduct);
    }
    return product;
  });
};

const order = (state = initialState,action) => {
  switch (action.type) {
    case 'ORDER_PRODUCT_UPDATE':
      let updatedProductList = updateProductList(action.updateProduct,state.get('orderProducts'));

      const newState = state.set( 'orderProducts',updatedProductList).set('lastOperation',action.type);

      return newState;
    default:
      return state;
  }
};

const { combineReducers } = Redux;
const orderApp = combineReducers({ order });

const { Component } = React;
const { Provider,connect } = ReactRedux;

const ProductList = ({
  products
}) => {
  return (<ul>
          {products.map(product => {
            return (
             <li key={product.get('productSKU')}>
               {product.get('productSKU')} - {product.get('productDesc')} - {product.get('qty')}
             </li>
            );
          }
          )}
        </ul>);
};

const OrderProducts = ({
  ocoStore,products,dispatch
}) => (
              <div>
                <ProductList products={products} />
                <a href='#'
                   onClick={e => {
                     e.preventDefault();
                     dispatch({
                       type: 'ORDER_PRODUCT_UPDATE',updateProduct: {
                         productSKU: 'Y54345',qty: 8
                       }
                    });
                 }}>Update Product Y54345</a>
            </div>
)

const mapStateToProps = ( state ) => {
    return { 
      ocoStore: state.order.toJS(),products: state.order.get('orderProducts')
    };
};

const OrderApp = connect(mapStateToProps)(OrderProducts);

const { createStore } = Redux;

ReactDOM.render(
  <Provider store={createStore(orderApp)}>
    <OrderApp />
  </Provider>,document.getElementById('root')
);

JSBIN：http://jsbin.com/qabezuzare

我的代码中不同的部分如下：

const newState = state.set( 'orderProducts',action.type);

这是因为我的updateProductList方法返回一个新的Immutable.List.

我希望看到工作解决方案可以帮助您解决问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!