React native changing instance prop not rerender component-CodePudding

I have an entity class called order

const order = new Order({status: 'available'});

export default class Order {
  constructor({status}) {
    this.status = status;
  }

  isCanceled() {
    return this.status === CANCELED;
  }
}

when passing order to a component throw mapStateToProps when the status changes. mapStateToProps will be called again with the new status but the component will not be rendered with the new data

but if I passed the order as a standard object it will re-render with the new data

This code is not working

const mapStateToProps = (state, props) => {
  const order = new Order({status: 'available'});

  return {
    order,
  };
};

This code works

const mapStateToProps = (state, props) => {
  const order = new Order({status: 'available'});

  return {
    order: {...order},
  };
};

I need the first code to work as I use some functions from the object inside the component like isCanceled()

CodePudding user response：

Hello all I knew what was the issue

the problem was in my reducer as I was changing in the state directly so the method wasn't pure function. So, react didn't recognize the change in props

this link has an example React Native components not re-render if props changed

CodePudding user response：

can you try this, while keeping the {...order} (2nd method you're using)

export default class Order {
  constructor({status}) {
    this.status = status;
    this.isCanceled = this.isCanceled; //add this line
  }

  isCanceled() {
    return this.status === CANCELED;
  }
}