Javascript Reactjs：为什么我的道具不是'；没有更新吗？_Javascript_Reactjs_Flux_Ecmascript 2016

Javascript Reactjs：为什么我的道具不是'；没有更新吗？

javascript reactjs

Javascript Reactjs：为什么我的道具不是'；没有更新吗？,javascript,reactjs,flux,ecmascript-2016,Javascript,Reactjs,Flux,Ecmascript 2016,我需要更新道具以呈现新数据我有一份赌场游戏的交易商名单。该列表没有问题，当您尝试添加新的经销商时会出现问题，经销商不会显示在视图中，您必须重新加载页面才能看到新的更改让我向您展示从操作开始的代码行动 class CreateDealersActions { constructor () { this.generateActions('createDealerSuccess'); } createDealer (data) { const that = thi

我需要更新道具以呈现新数据

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

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

行动

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））
但是如果您将createDealResuces（）
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(),
    });
  }

}

你到底在哪里更新道具？您是否试图从组件内部对其进行更改？这违反了React的第1条规则，你不能更换道具@React的Mathletics更好的是无状态的，所以我没有从组件内部接触状态，我只想更新道具，以便在视图中显示新项目。这就是我想知道的，如何更新组件道具；只能从组件内部触摸状态<代码>道具
总是从父级传入。@Mathletics函数\u addDealer是我用来将组件的新数据通过存储、操作发送到DB@Mathletics你能帮我写点代码吗？我想我错过了一些重要的事情。
@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(),
    });
  }

}

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