Отображение массива-ответов в виде вложенных меню с использованием React

Question

Я довольно новичок в React и застрял из-за очень незначительной проблемы.Я написал пользовательский интерфейс, который по сути вызывает службу, которая возвращает ответы в виде массива.Теперь мне нужно, чтобы эти ответы от службы отображались в виде вложенного меню.Например, один из моих вызовов axios возвращает ответ [1,2,3,4], а другой вызов axios возвращает [1.1,1.2,1.3, ..].Я хочу, чтобы эти ответы были выровнены в форме

1
  1.1
  1.2
  1.3
2
  2.1

и т.д.. должен отображаться.

Я использую React, компоненты material-ui и для этого редукцию.У меня есть функция для выполнения вышеупомянутого ... но я не уверен, правильно ли я это делаю.

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, и я думал об использовании компонента ListItemText из пользовательского интерфейса материала.

Answer 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);