使用从 Material-UI List for React 中的 React 组件的状态异步获取的 ListItem 组件

Posted 2023-02-22

【中文标题】使用从 Material-UI List for React 中的 React 组件的状态异步获取的 ListItem 组件

【英文标题】：Using asynchronous obtained ListItem components from the state of a React component in Material-UI List for React

【发布时间】：2017-10-03 19:38:24

【问题描述】：

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;
  

【问题讨论】：

几件事，我不认为componentDidMount 是一个异步函数，并且根据您要访问的端点的数量，使用 redux 和类似 redux-saga 的东西来处理可能更有意义你的州。

我的应用程序将严重依赖端点，实际上通过允许用户在树结构中导航来永久地向用户显示数据库中的内容。

好的，如果你能提供一个更完整的工作示例，我可以帮助你展示你想要做什么。

这实际上是现在所有的东西，但我会尝试研究 redux。

好的，我强烈推荐 redux-saga 进行异步操作！如果您需要任何帮助，可以@我的用户名。

【参考方案1】：

你需要在componentDidMount中等待getInitialState。

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

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

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

【参考方案2】：

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

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

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

只需移动所有ajax逻辑组件DidMount，当ajax解析后，修改状态。

我从未尝试过使用 await，所以我不能确定它是否适用，但它 100% 适用于 Promises（例如 fetch）

一个小小的伪代码：

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

【讨论】：

componentDidMount 是异步函数。您可以等待承诺而不是 .then 链接它们。