0

我需要更新我的道具才能呈现新数据。

我有一个赌场游戏经销商列表的视图。该列表没问题，当您尝试添加新经销商时出现问题，经销商未显示在视图中，您必须重新加载页面才能看到新的更改。

让我向您展示我的代码，从操作开始

行动

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}

如果你把_addDealer console.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);
    }
  }
}
4

0 回答 0