时间戳

首页 > 解决方案 > 使用 React 以嵌套菜单的形式显示数组响应

reactjs - 使用 React 以嵌套菜单的形式显示数组响应

问题描述

我对 React 还很陌生，并且对一个非常小的问题感到困惑。我编写了一个 UI，它本质上调用了一个服务，该服务以数组的形式返回响应。现在，我需要以嵌套菜单的形式显示来自服务的响应。前面。g.，我的一个 axios 调用返回 [1,2,3,4] 的响应，而另一个 axios 调用返回 [1.1,1.2,1.3,..]。我希望这些响应以以下形式对齐

1
  1.1
  1.2
  1.3
2
  2.1

等等，我。e. UI 应该显示 1,2,3,4 .. 当用户点击 1 时，应该显示 1.1,1.2 等。

我正在为此使用 React、material-ui 的组件和 redux。我有一个功能来做上面提到的..但我不确定我是否做对了。

handleMenuData() {
var applist = this.props.menuData;
    var appNames = [];
    var moduleNames = [];
    applist.forEach(app => {
      app.moduleNames.forEach(module => {
        try {
          return axios.get(
            'service url' + app.name + '/' + module,
          );
        } catch (error) {
          console.error(error);
        }

      });
      appNames.push({
        name: app.name,
        moduleNames: moduleNames,
      });
      moduleNames = [];
    });
    this.setState({
      appNames: appNames,
    });
  }

在我的状态下，

this.state = {
      appList: [],
      appNames: [],
      moduleNames: [],
    };

应用程序名称是 1,2,3，模块名称是 1.1,1.2，我正在考虑使用 Material UI 中的 ListItemText 组件。

标签： reactjsreact-redux

解决方案

我认为你在做什么是不正确的。axios.get 是一个异步函数，您无需等待来自服务器的响应。这就是为什么您将所有数组都设为空的原因。尝试调用这样的递归函数。

const getModuleNames = (i) => {
    axios.get('service url' + applist[i].name + '/' + module)
        .then((response) => {
           if(i < applist.length){ 
              applist[i].moduleNames = response.data;
              appNames.push({
                 name: applist[i].name,
                 moduleNames: applist[i].moduleNames
              });
              getModuleNames(i++);
            }
            else {
               // code you want to execute after adding data to appNames
            }
        }).catch((err) => {
            // error handling
        });
}

getModuleNames(0);

推荐阅读