Question

来自http://www.material-ui.com/#/components/list的List组件不会呈现异步接收的元素，该怎么办？

我在组件的render（）方法中使用我的列表的方式：

<List children={this.state.elements} />

填写我的州：

constructor(props) {
    super(props);
    this.state = {elements: []};
}

async componentDidMount() {
    this.setState({elements: this.getInitialState()});
}

async getInitialState() {
      var elements = [];
      const response = await fetch('api/endpoint/elements');
      const result = await response.json();
      if (result.status = "success") {
          elements.push(<ListItem primaryText="Dummy Data" />);
      }
      return elements;
  }

Answer 1

这个概念没问题，应该可行。

componentDidMount是为小型应用程序添加异步逻辑的地方（请参阅sagas，redux等更大的应用程序）。

你的问题是setState不是异步函数，因此无法正确设置组件的状态。

只需移动所有ajax逻辑componentDidMount，当ajax解析时，修改状态。

我从未尝试等待，所以我无法确定它是否适用，但它100％适用于Promises（例如获取）

一个很小的伪代码：

componentDidMount(){
   //jquery's POST function, just as an example
   $.post(url).then(() => {
      this.setState({dataLoaded:true});
   });
}

Answer 2

您需要等待componentDidMount中的getInitialState。

async componentDidMount() {
    const state = await this.getInitialState();
    this.setState({elements: state});
}

如果你想在设置状态后做某事，请使用setState的Async包装并等待它

  setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
  }

使用异步获取的ListItem组件来自材质-UI列表中的React组件的状态以进行反应

2 个答案: