0

I need to update my props in order to render new data.

I have a view with a list of dealers for a casino game. That list is OK, the problem comes up when you try to add a new dealer, the dealer doesn't display in the view, yo have to reload the page in order to see the new change.

Let me show you my code starting in the actions

action

class CreateDealersActions {

  constructor () {
    this.generateActions('createDealerSuccess');
  }

  createDealer (data) {
    const that = this;
    that.dispatch();
    axios.post(`${API_ENDPOINT}/create-dealer/create-dealer`, data)
      .then(function success (response) {
        that.actions.createDealerSuccess({response});
      })
  }
}

store

class GetDealersStore {

  constructor () {
    this.state = {
      dealerData : null,
    };
  }

  @bind(GetDealersActions.dealerDataSuccess)
  dealerDataSuccess (data) {
    this.setState({
      dealerData : data,
    });
  }

  @bind(CreateDealersActions.createDealerSuccess)
  createDealerSuccess (data) {
    this.setState({
      dealerData : data,
    });
  }

}

the dealerDataSuccess() is the function I call when the view loads in order to render the list of dealers, and createDealerSuccess() is the one called when you attempt to add a new dealer.

here you will see what every function returns

if you put in dealerDataSuccess() console.log(JSON.stringify(data));

{"dealersData": [{
 "DealerId":"1",
 "DealerName":"Carmen",
 "NickName":"Carmen",
 "Picture":"url",
 "Active":"1",
 "LegalId":"13",
 "TypeId":"1"}
]}

but if you put in createDealerSucess() console.log(JSON.stringify(data)); it returns something like this:

{
  "response": {
    "data": {
      "success": "New dealer successfully inserted."
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
      "content-type": "application/json; charset=utf-8"
    },
    "config": {
      "method": "post",
      "headers": {
        "Content-Type": "application/json;charset=utf-8"
      },
      "transformRequest": [
        null
      ],
      "transformResponse": [
        null
      ],
      "url": "http://localhost:1102/services/create-dealer/create-dealer",
      "data": {
        "DealerName": "my Name",
        "CardId": "1221",
        "NickName": "newName",
        "Picture": "url",
        "Active": "1",
        "LegalId": "321321",
        "TypeId": "1"
      }
    }
  }
}

the component code

component

@connectToStores
export default class Dealers extends Component {

  static contextTypes = {
    router : React.PropTypes.func,
  }

  constructor (props) {
    super(props);
    this.state = {}
  }

  componentWillMount () {
    GetDealersActions.getDealers();
  }

  static getStores () {
    return [ GetDealersStore ];
  }

  static getPropsFromStores () {
    return {
      ...GetDealersStore.getState(),
    }
  }

  render () {

    return (<html for component>);
  }

  _addDealer = () => {
    CreateDealersActions.createDealer({
      DealerName : this.refs.DealerName.getValue(),
      CardId     : this.refs.CardId.getValue(),
    });
  }

}

now in the component part there is componentWillMount(), if you put console.log(JSON.stringify(this.props)); it returns

{"params":{},"query":{},"dealerData":null}

and if you put in _addDealer console.log(JSON.stringify(this.props)); where it suppose to add the new dealer you get the whole props but without the last dealer you add, so you have to refresh the page in order to see the new dealer in the view/screen.

What do you think is going on here ?

PS: if you similar question about this from me, take into account that in the other question I was 2 using different stores, here I am using just one

EDIT

the Dealers component is within a tab named management, which is this one:

const menuItems = [
  { route : 'dealers', text : 'Dealers' },
  { route : 'game-info', text : 'Game Info' },
  { route : 'player-info', text : 'Players Info' },
  { route : 'money', text : 'Money' }
];

export default class Management extends React.Component {

  static propTypes = {
    getActivePage : React.PropTypes.func,
    menuItems : React.PropTypes.arrayOf(React.PropTypes.object),
  }

  static contextTypes = {
    router : React.PropTypes.func,
  }

  render () {
    return (
      <div>
        <TabsMainMenu menuItems={menuItems} getActivePage={this._getActivePage} />
        <RouteHandler />
      </div>
    );
  }

  _getActivePage = () => {
    for (const i in menuItems) {
      if (this.context.router.isActive(menuItems[i].route)) return parseInt(i, 10);
    }
  }
}
Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Non
  • 8,409
  • 20
  • 71
  • 123
  • Where exactly are you updating props? Are you trying to change it from inside the component? That's breaking Rule #1 of React, _thou shalt not change props_! – Evan Davis Oct 12 '15 at 20:53
  • @Mathletics according to React is better Stateless, so I am not touching the state from inside component, all I want is to update the props so the the new Items are display in the view. And that's what I want to know, how to update the component props. – Non Oct 12 '15 at 20:55
  • You have that totally backwards; you should ONLY touch state from inside a component. `props` are __always__ passed in from the parent. – Evan Davis Oct 12 '15 at 20:56
  • @Mathletics the function `_addDealer` is the one I am using to send the new data of the component through the stores, actions and then to the DB – Non Oct 12 '15 at 20:56
  • @Mathletics can you help me with a bit of code ? I guess I am missing something important here. – Non Oct 12 '15 at 20:57
  • What component is providing `props` to the `dealer`? – Evan Davis Oct 12 '15 at 20:58
  • @Mathletics all of that comes from the `stores`. All the code I have regarding this issue, is pasted in the question, see the **EDIT** part – Non Oct 12 '15 at 21:00

0 Answers0