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

可选的

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 中等待 getInitialState。

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

如果你想在设置状态后做一些事情,使用 setState 的这个异步包装器并等待它

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在React中使用Material UI组件

观察子组件React与Material UI的状态

使用Material-UI从React中的组件增强

在表单中如何使用Material UI的React评分组件?

React + Material UI-使用样式覆盖组件中的MuiTheme

使用 .map 函数设计 React Material UI 组件的样式

React Material UI BottomNavigation组件路由问题

在React Material UI中显示在ListItem中

React Material UI ListItem请点击

如何使用React JS在Material UI中使整个Card组件可点击?

使用 Material UI 中的 Dropdown 组件在 React JS 中设置和更新状态

无法获取Material-UI的目标属性-选择React组件

React:如何从Material-UI TextField组件获取值

React:使用异步数据更新父组件的子组件状态

用于右切换的Material-UI ListItem组件

React Native:使用组件状态获取请求

材质UI:在React Class组件中使用主题

在iframe中使用Material UI组件

将Material-ui React组件居中于页脚元素中

Material-UI React:Paper组件的全局主题覆盖

在React中设置Material UI的TextField组件的defultValue

React中Material-UI中的可滚动列表组件

如何为Material-UI React组件覆盖@media CSS

Material UI 组件打破 React 应用程序

React onDragStart在Material UI Autocomplete组件中不触发

React:CssBaseLine 组件在 Material UI 主题更改后不会更新

如何在本地 React 项目中引用 Material UI 组件

React Material UI-导出多个高阶组件

如何根据Material UI(React JS)的要求制作“选择”组件