Объект экспорта ReactJS / TypeScript из Ajax
Итак, у меня есть несколько вызовов ajax (jQuery), которые возвращают, конечно, список элементов (объект для каждой функции).
Я хочу, чтобы компонент вызывал все, что получает ajax, бросал мне элементы, а затем я собираюсь построить еще один объект со всеми этими результатами (4 результата будут объединены в один объект с разными реквизитами).
Моя проблема здесь ... как я могу вызвать и экспортировать эти объекты? Я попытался создать большую функцию и экспортировать ее из TSX. Все работает, с небольшой ошибкой ... После прохождения этих 4 вызовов ajax он продолжает повторяться, как будто сам компонент продолжает обновляться, и это меня буквально ни к чему не приводит.
Любая идея, как я могу экспортировать результаты вызова ajax, не видя его LOOP, как 100 раз?
Это то, что я пробовал до сих пор ->
let CalendarItems = createCalendarItems();
export {CalendarItems};
P.S: Я новичок в 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.info("success ");
},
error: function () {
console.info("Failed to get details ");
}
});
}
Цель этого (возможно, помогает): ->
Я делаю AJAX-вызовы Sharepoint для извлечения элементов (были там, сделали это, вызовы работают). Эти вызовы извлекают список элементов (4 списка), к которым я присоединяюсь в новом объекте.
Этот новый объект БУДЕТ использоваться как список для response-bootstrap-table, как в -> Я буду использовать этот объект для создания своей таблицы.
Итак, я в конечном итоге передам созданный объект этому ->
<BootstrapTable data = { calendarObjectAllItems} version='4'>
вероятно, потребуется увидеть более двух строк кода, чтобы понять, что происходит ...
Если бы английский (или другие естественные языки) были однозначными, мы бы писали код напрямую на них. Поскольку это не так, мы разработали языки программирования для однозначного взаимодействия друг с другом. Поэтому вместо описания вашей проблемы на английском языке опубликуйте ее в виде кода.
Я написал буквально не так много кода, я все еще пытаюсь выяснить, как я могу экспортировать свой объект из одного файла в другой (так сказать) lol. Я обновил свой вопрос, возможно, это поможет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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. Это заставит его снова отобразить, теперь уже с данными.
Я думаю, что переступил границы, пытаясь начать с чего-то настолько сложного, любая идея, почему "const {items}" отображается как -> Type 'Readonly <{children ?: ReactNode; }> & Readonly <{}> 'не имеет свойства' items 'и сигнатуры индекса строки. Я не хочу, чтобы компонент вызывался с этими элементами (например, добавлял их в react.component <>). Если я все еще вас недостаточно раздражал, пожалуйста, взгляните на мой первоначальный вопрос, я немного обновил его, возможно, вы сможете сузить его.
Эти ошибки происходят из машинописного текста. Похоже, вы не определили тип состояния и / или свойств компонента. Обычно вы делаете это, говоря class MyComponent extends Component<Props, State>, где Props - это определение типа для ваших свойств, а State - это определение типа для вашего состояния. См. Раздел «как создать компонент реакции с машинописным текстом» на этой странице: gist.github.com/juhaelee/b80ab497f74e7393b15439c17421d299
Хм, я помню, как создавал некоторые компоненты без использования всех свойств и состояния (поскольку я их не использовал), возможно, я был неправ. Снова в школу для меня, спасибо!
вы сказали, что выполняете вызовы ajax, поэтому createCalendarItems возвращает обещание?