Как использовать axios и получить данные JSON

У меня проблемы с аксиомами. Я пытаюсь использовать библиотеку материалов и сделать таблицу сейчас. Я хочу получить данные Json из «CheckListService» и установить переменную в «dataAll», но это не работает. я устанавливаю переменную Консоль сказала

Строка 10:11: «данным» присваивается значение, но никогда не использовались неиспользуемые переменные.

Может быть, это простая ошибка, но я не понял. Пожалуйста, скажите мне, почему это не работает.

Контрольный список.js

import axios from 'axios'

const CHECKLIST_REST_API_URL = 'http://localhost:8080/api/list';

class CheckListService {

    getList() {
        return axios.get(CHECKLIST_REST_API_URL);
    }
}


export default new CheckListService();

Таблица.js

import React from 'react';
import MaterialTable from 'material-table';
import CheckListService from '../services/CheckList';

export const Table = () => {

    let dataAll = [];


    const data = () => {
        CheckListService.getList().then((response) =>
            dataAll = response.data
        )
    }



    const columns = [
        {
            title: 'リスト番号', field: 'listNo'
        },
        {
            title: '採用日', field: 'saiyouDate'
        },
        {
            title: 'バージョン', field: 'version'
        },
        {
            title: '種別', field: 'shubetu'
        },
        {
            title: 'ライセンス', field: 'licenseManage'
        },
        {
            title: '用途', field: 'youto'
        },
        {
            title: '備考', field: 'bikou'
        },
        {
            title: '承認者', field: 'authorizer'
        },
        {
            title: '承認日', field: 'approvalDate'
        },
        {
            title: 'URL', field: 'url'
        }
    ]


    return (
        <div>

            <MaterialTable title = "MaterialTable"

                data = {dataAll}
                columns = {columns}


            />
        </div>
    )


}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
246
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пара вещей -

  • использовать состояние, чтобы заставить компонент перерисовываться после того, как вы получили данные от API
  • используйте эффект для запуска асинхронных запросов, в ту минуту, когда вы почти запускаете запрос при каждом повторном рендеринге, что плохо.
const [dataAll, setDataAll] = useState([]);

useEffect(() => {
   CheckListService.getList().then((response) =>
      setDataAll(response.data)
   )
}, []) // <!-- empty array has this effect run once, on mount.

Спасибо что сказал мне. Проблема решена!!

sy-torii 23.12.2020 09:53

Другие вопросы по теме