Блог

Я новичок в реагировании и использую дизайн муравьев в качестве основы. До сих пор я добился значительного прогресса в своем проекте, запустив и запустив бэкэнд, а также работая над интерфейсом, в котором многие компоненты работают правильно. Доволен прогрессом до этого момента!

Теперь я пытаюсь создать таблицу, получающую данные из моего API. Мне удалось извлечь данные, используя внутри моего компонента класса, используя:

 render(){       
const workpack = fetch(process.env.REACT_APP_API_URL 'work_package')
              .then((response) => response.json())
              .then((data) => console.log(data));
 

Я проверил сайт, и он правильно возвращает данные API, как:

 0: {work_package_ID: 1, work_package_name: 'Package1'}
length: 1
[[Prototype]]: Array(0)
 

Моя проблема возникает, когда я пытаюсь выделить заголовки столбцов таблицы (ключи) или строки (значения).

Если я использую Object.keys(workpack) или Object.values(workpack) создаю новые константы для извлечения данных, я не могу получить желаемые значения, и я думаю, что это связано с тем, что fetch поставил «0» в качестве ключа перед массивом.

В конце концов, я ищу обобщенную процедуру для создания массива «Источник данных» и массивов «столбцы» (как показано в документации от Ant) без необходимости вручную копировать всю информацию из моих таблиц.

Какой-нибудь намек или четкая ссылка? Я некоторое время занимался исследованиями, но, похоже, не нашел хорошего источника.

Большое спасибо!

Попробуй Object.keys(workpack[0]) или Object.values(workpack[0])