Reactjs: Почему мои реквизиты не обновляются?

Мне нужно обновить реквизит, чтобы отобразить новые данные.

У меня есть представление со списком дилеров для игры в казино. Этот список в порядке, проблема возникает, когда вы пытаетесь добавить нового дилера, дилер не отображается в представлении, вам нужно перезагрузить страницу, чтобы увидеть новое изменение.

Позвольте мне показать вам мой код, начиная с действий

действие

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

хранить

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

}

dealerDataSuccess() это функция, которую я вызываю при загрузке представления для отображения списка дилеров, и createDealerSuccess() тот, который вызывается, когда вы пытаетесь добавить нового дилера.

здесь вы увидите, что возвращает каждая функция

если вы положите в dealerDataSuccess()console.log(JSON.stringify(data));

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

но если вы положите в createDealerSucess()console.log(JSON.stringify(data)); он возвращает что-то вроде этого:

{
  "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"
      }
    }
  }
}

код компонента

составная часть

@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(),
    });
  }

}

сейчас в составной части есть componentWillMount(), если вы положите console.log(JSON.stringify(this.props)); это возвращается

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

и если вы положите в _addDealerconsole.log(JSON.stringify(this.props)); где предполагается добавить нового дилера, вы получите весь props но без добавления последнего дилера, поэтому вам нужно обновить страницу, чтобы увидеть нового дилера в представлении / экране.

Как вы думаете, что здесь происходит?

PS: если у вас похожий вопрос по этому поводу от меня, учтите, что в другом вопросе меня было 2, используя разные магазины, здесь я использую только один

РЕДАКТИРОВАТЬ

Компонент Dealers находится на вкладке с именем management , который этот:

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);
    }
  }
}
Источник

0 ответов

Другие вопросы по тегам