Question

我想在新的更新出现后更新/重新渲染组件。我所做的只是：

我有一个赌场游戏的经销商列表，我想要的是添加一个新的经销商，一旦添加新的经销商，然后在视图中显示它。它实际上正在发生，但为了让我看到新的经销商，我必须重新加载页面。

我没有更新状态，我正在使用this.props。看看我的代码

@connectToStores
export default class Dealers extends Component {

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

  componentWillMount () {
    GetDealersActions.getDealers();
  }

  static getStores () {
    return [ GetDealersStore, CreateDealersStore ];
  }

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

  render () {
    return (
      <div>
         {!!this.props.dealerData ?
           this.props.dealerData.dealersData.map((dealer) => {
             return (here I am rendering what I need);
          : <p>Loading . . .</p>
      </div>
  }

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

正如您在代码中看到上面的组件正在正确执行初始呈现一样，当您点击_addDealer()而未更新组件时出现问题，您应该重新加载页面以便查看新的视图中的项目。

如果你在console.log(this.props);内进行_addDealer()，你会得到类似的内容

{params: Object, query: Object, dealerData: Object, newDealerData: null}

其中dealerData包含视图中经销商的完整数据，但您无法看到新经销商创建的数据。 newDealerData仍为null

那么，您认为每次新的道具/经销商出现时我应该怎么做才能更新组件？或者如何更新props？在这种情况下哪种方法是正确的？

以下是商店和操作的完整代码，以防万一

动作

@createActions(flux)
class CreateDealersActions {

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

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

商品

@createStore(flux)
class CreateDealersStore {

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

  @bind(CreateDealersActions.createDealerSuccess)
  createDealerSuccess (data) {
    this.setState({
      newDealerData : data.response.config.data,
    });
  }

}

经销商组件位于名为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 个答案: