Question

第一次使用React时，我需要知道在加载视图时如何更新状态。

我要做的只是GET请求，以获取赌场游戏的经销商列表。基本上，我缺少1或2个步骤，用于渲染DOM中的经销商列表

我将展示我在使用我的代码做什么，之后我将解释我想要的内容

这是行动部分的第一步

getDealerActions.js

class GetDealersActions {

  constructor () {
    this.generateActions('dealerDataSuccess', 'dealerDataFail');
  }

  getDealers (data) {
    const that = this;
    that.dispatch();
    axios.get('someroute/get-dealers/get-dealers')
      .then(function success (response) {
        that.actions.dealerDataSuccess({...response.data});
      })
  }
};

然后我们搬到商店

getDealersStore.js

class GetDealersStore {

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

  @bind(GetDealersActions.dealerDataSuccess)
  dealerDataSuccess (data) {
    this.setState({
      dealerData : data,
    });
   console.log(this.state.dealerData);
  }
}

在这种情况下，console.log(this.state.dealerData);会返回类似这样的内容，这正是我需要的内容

Object {dealersData: Array[3]}

问题出现在组件部分，老实说，因为我不知道如何处理那里的数据

    class Dealers extends Component {

      constructor (props) {
        super(props);
      }

      static getStores () {
        return [ GetDealersStore ];
      }

      static getPropsFromStores () {
        return GetDealersStore.getState();
      }

      render () {
       // here need to implement the .map function but
       // as this.props.dealerData is null, I am unable to render it.
        return (
          <div>
            <ActionButton onClick={this._getDealers}>Test</ActionButton>
           //in some part here I need to render the list of dealers
          </div>
        );
      }

      _getDealers = () => {
         console.log(this.props.dealerData);
         GetDealersActions.getDealers();
      }

    }

此console.log(this.props.dealerData);第一次返回null，我必须在_getDealers()点击两次才能获得此内容

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

那么，我应该在渲染方法中做什么才能填写经销商数据？如果我在视图中，我该怎么做才能更新状态？

如果你得到它，我只需要this.props.dealerData获取数据，而不是null。所以我可以在这个视图中渲染它。

Answer 1

这应该是这样的结构：

class Dealers extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    GetDealersActions.getDealers();
  }
  render() {
    let content;
    if (this.state.dealerData) {
      content = this.state.dealerData.map((datum) => {
        return <div>TODO: JSX!</div>;
      );
    } else {
      content = <div>Loading . . .</div>;
    }
    return <div>{content}</div>;
  }
}

视图加载时更新状态

1 个答案: