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

-2

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

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

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

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

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

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

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

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 списка), с которыми я соединяюсь в новом объекте.

Этот новый объект будет использоваться как список для реакции-bootstrap-table, как в → Я буду использовать этот объект для создания моей таблицы.

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

  <BootstrapTable data={ calendarObjectAllItems} version='4'>
  • 0
    вы сказали, что делаете вызовы ajax, так возвращает ли createCalendarItems обещание?
  • 1
    вероятно, потребуется увидеть более двух строк кода, чтобы можно было узнать, что происходит ...
Показать ещё 2 комментария
Теги:

1 ответ

0
Лучший ответ

Трудно дать специфику, так как вы не предоставили много кода. Но, вообще говоря, если вам нужно загрузить асинхронный материал в компоненте, вы отбросите его с помощью hooks жизненного цикла 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. Это заставляет его визуализировать снова, теперь с данными.

Поделиться
  • 0
    Я думаю, что я перешагнул мои границы, пытаясь начать с чего-то настолько сложного, любая идея, почему "const {items}" отображается как -> Type 'Readonly <{children ?: ReactNode; }> & Readonly <{}> 'не имеет свойства' items 'и не имеет подписи индекса строки. Я не хочу, чтобы компонент вызывался с этими элементами (как в добавлении их вact.component <>). Если я все еще вас не раздражал, пожалуйста, посмотрите на мой первоначальный вопрос, я немного обновил его, возможно, вы сможете сузить его.
  • 0
    Эти ошибки происходят из машинописи. Похоже, вы не определили тип для состояния компонента и / или реквизита. Обычно вы делаете это, говоря, что class MyComponent extends Component<Props, State> , где Props - это определение типа для вашего props, а State - определение типа для вашего состояния. См. Раздел «Как создать компонент реагирования с машинописью» на этой странице: gist.github.com/juhaelee/b80ab497f74e7393b15439c17421d299
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню