ReactJS / TypeScript объект экспорта из Ajax

Question

Хорошо, поэтому у меня есть несколько вызовов ajax (jQuery), которые возвращают, ofc, список элементов (объект для каждой функции).

Здесь я хочу, чтобы компонент вызывал все те, которые получает ajax, бросает мне предметы, а затем я собираюсь построить еще один объект со всеми этими результатами (4 результата будут объединены в один объект с разными реквизитами).

Моя проблема здесь ... как я могу вызватьи экспортировать эти объекты?Я попытался создать большую функцию и экспортировать ее из TSX.Все работает, с небольшой ошибкой ... После прохождения этих 4-х вызовов ajax он продолжает повторяться, как будто сам компонент обновляется, и это буквально меня ни к чему не приводит.

Любая идея, как я могу экспортировать результаты ajaxзвонить, не видя LOOP, как 100 раз?

Это то, что я пробовал до сих пор ->

let CalendarItems = createCalendarItems();
export {CalendarItems};

PS: Я очень новичок в React и углубляюсь в довольно сложные проекты, так что терпите меня.Заранее спасибо.

function getItems() {


  var today = new Date();
  return $.ajax({
    url: "SOMEURL"

    type: "GET",
    headers: {
      "ACCEPT": "application/json;odata=verbose"
    },
    async: false,
    success: function (data) {
      var myitems = data.d.results;
      console.log("success  ");
    },
    error: function () {
      console.log("Failed to get details ");
    }
  });
}

Цель этого (возможно, это помогает): ->

Я делаю AJAX-вызовы в Sharepoint, чтобы получить элементы (были там, сделали это, звонилиРабота).Эти вызовы извлекают список элементов (4 списка), к которым я присоединяюсь в новом объекте.

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

Поэтому я в конечном итоге передам созданный объект этому ->

  <BootstrapTable data={ calendarObjectAllItems} version='4'>

Answer 1

Трудно дать конкретику, так как вы не предоставили много кода. Но, вообще говоря, если вам нужно загрузить асинхронный материал в компонент, вы начнете его использовать с помощью ловушки жизненного цикла componentDidMount. Таким образом, ваш компонент может выглядеть примерно так:

import { fetchCalendarItems } from 'somewhere';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
    }
  }

  componentDidMount() {
    fetchCalendarItems()
      .then(items => this.setState({ items }))
  }

  render() {
    const { items } = this.props;
    // If necessary, you can render some placeholder until the data is loaded
    //if (items.length === 0) {
    //  return <div>Loading...</div>
    //}

    return (
      <div>
        {items.map(item => <div>{item.title}</div>)}
      </div>
    )
  }
}

Таким образом, компонент будет монтироваться и отображаться пустым (или отображать экран загрузки при необходимости). Затем выполняется http-запрос, и когда запрос завершается, он вызывает setState. Это вызывает его рендеринг снова, теперь с данными.