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

【问题标题】：Displaying array-responses in the form of a Nested menus using React使用 React 以嵌套菜单的形式显示数组响应
【发布时间】：2019-01-27 19:34:57
【问题描述】：

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

的形式对齐

等等，一世。 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 组件。

【问题讨论】：

您好，您是否尝试在 setState 完成后记录您的状态？换句话说，您从代码中得到了什么结果？
我不完全确定该怎么做。
在您的handleMenuData() 函数中，底部只是console.log(this.state)。您还可以使用带有 React 扩展的 Chrome 开发工具来实时查看状态变化。
嗨，Keno，{appList: Array(0), appNames: Array(0), moduleNames: Array(0)} - 我在添加 console.log 时看到了这一点。
我猜您的“服务网址”是您代码中的实际网址？

标签： reactjs react-redux

【解决方案1】：

我认为你的做法是不正确的。 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);

【讨论】：