Question

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

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

让我通过动作

向您展示我的代码

动作

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使用不同的商店，这里我只使用一个

修改

经销商组件位于名为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);
    }
  }
}

Reactjs：为什么我的道具没有被更新？

0 个答案: