Настройка динамического меню с API-объектами json?

Question

Я не уверен, что я мог бы сделать, чтобы эта работа ... Так что я вызываю данные API (которые являются просто набором вложенных объектов json), чтобы создать меню.До сих пор он работал так, что он рендерит первый слой объектов (первый img), и когда вы нажимаете на каждый элемент, под ним появляется следующий уровень (второй img).Это работает рекурсивно, поэтому я предполагаю, что это сработает для следующего уровня ниже, когда я нажимаю на элемент в «уровне 2», но это не так.

Может кто-нибудь увидеть, что я могу изменить в своем кодечтобы заставить это работать?

class Menu extends React.Component {
  state = {
    categories: [],
    list: ""
  };


  //handle displaying list of values when clicking on button
  //search for list of values within object
  handleSearch = (obj, next, event) => {
    // console.log(event.target.name);
    Object.keys(obj).forEach(key => {
      if (typeof obj[key] === "object") {
        if (next === key) {
          //create DOM  CHILDREN
          createData(Object.keys(obj[key]), key, this.test, event);
        }
        this.handleSearch(obj[key], next);
      }
    });
  };

  componentDidMount() {
    axios.get("https://www.ifixit.com/api/2.0/categories").then(response => {
      this.setState({ categories: response.data });
    });
  }

  render() {
    return (
      <React.Fragment>
        {/* display list of things */}
        <div className="columns is-multiline">
          {Object.keys(this.state.categories).map(key => (
            <div className="column is-4">
              <div
                onClick={event =>
                  this.handleSearch(this.state.categories, key, event)
                }
              >
                {key}
              </div>
              <div name={key + "1"} />
            </div>
          ))}
        </div>
      </React.Fragment>
    );
  }
}

и вот код для createData, который создает следующий уровень данных и должен сделать это так, чтобы эти элементы можно было щелкнуть, чтобы показать следующий уровень

var index = 1;
export function createData(data, key, search, e) {
  e.stopPropagation();
  let parent = document.getElementsByName(key + "1");

  //create elements and append them
  for (let i = 0; i < data.length; i++) {
    let wrapper = document.createElement("ul");
    wrapper.innerHTML = data[i];
    wrapper.name = data[i] + index + 1;
    wrapper.addEventListener("click", search(data[i]));
    parent[0].append(wrapper);
  }
}

Вот скриншот "категорий" в консоли (объекты внутри объектов внутри объектов)

Answer 1

Для простоты мы представим этот вложенный объект рекурсивно, который структурирован как ваш categories объект:

const categories = {
  level1: {
    "level1-1": {
      "level1-1-1": {
        "level1-1-1-1": {}
      }
    },
    "level1-2": {
      "level1-2-1": {}
    }
  },
  level2: {}
};

Конечным условием рекурсии будет объект без keys.

Для каждого слоя визуализируйте keys и выполните шаг рекурсии.

const makeMenuLayer = layer => {
  const layerKeys = Object.entries(layer).map(([key, value]) => (
    <>
      {key}
      {makeMenuLayer(value)}
    </>
  ));
  return <div>{layerKeys}</div>;
};

Результат:

level1
level1-1
level1-1-1
level1-1-1-1
level1-2
level1-2-1
level2

Оформить заказ в песочнице.

Answer 2

Вы должны стараться избегать манипулирования DOM, создавая / добавляя элементы с помощью vanilla JS, при использовании React, если это возможно, одним из главных его преимуществ является виртуальный DOM, который управляет рендерингом и избегает конфликтов.

Не уверен, насколько глубоки объекты, которые вы визуализируете, но из-за сложности данных это было бы неплохо для использования другого компонента для модульной обработки вещей и избежания беспорядка, с которым вы сейчас имеете дело.

Предполагая, что все дочерние объекты имеют одинаковую структуру, вы можете создать компонент, который будет рекурсивно отображаться на основе ключей объекта. Этот ответ должен помочь.