доступ к полям класса TypeScript с помощью React

Question

Я работаю с React, TypeScript и axios для HTTP-запросов.Когда я делаю axios.get (myURL), я получаю свои данные в следующем формате:

[["value1","value2"],["value3","value4"],["value5","value6"]]

Я создал класс, представляющий массив строк.Вот код:

import  Serializable  from '../interface/serializable';

export default class Row {
    public row:string[];
}

А вот код компонента, в котором я хотел бы использовать этот класс:

import Row from '../class/row';

interface IColumnSelectionState {
    readonly data: Row[],
}
    class MyDataextends React.Component<any,IColumnSelectionState>{

            constructor(props: any) {
                super(props);
                this.state = {
                    data: [],
                }
                this.submit = this.submit.bind(this);
            }

   private submit():void{
                axios.get("myURL").then(res => {
                    const response = res.data;
                    this.setState({ data: response });
                }).catch(error => {
                    console.log(error);
                })
            }
        }

Проблема, когда я выполняю "submit () ", и я делаю:

 console.log (this.state.data) // I see my data in the format described    above

, но когда я делаю:

console.log (this.state.data [0].row) // this shows me undefined while I declared my array in the Row class

Мне действительно нужно получить первый массив для его зацикливания и выполнения обработок.

Если у кого-то есть идеи, как это сделать, то спасибо за помощь!

Заранее спасибо !!!

Answer 1

возвращает мне экземпляр Row.Поэтому обычно, если я делаю "this.state.data [0] .row", он должен отправить мне строковый массив, потому что Row имеет свойство "row: string []"

Answer 2

Я согласен с Баразу.Позвольте мне по-другому взглянуть на проблему.Поле данных, которое вы возвращаете, само по себе имеет тип 'Row'.Я немного изменил запрос Axios, чтобы продемонстрировать.(Извиняюсь за форматирование заранее)

           axios.get("myURL").then(res: AxiosResponse<Row> => { // added a type here to res
                const response = res.data; // response is a Row[]
                this.setState({ data: response });
            }).catch(error => {
                console.log(error);
            })

Здесь Axios использует обобщенные типы для определения полезной нагрузки (поля данных) типа Row - это не поле или свойство для «данных», а «данные»типа 'Row []'.

Я не уверен, где вам нужно перебирать эти данные, но я собираюсь предположить, что, как только он окажется в состоянии компонента.Тогда вы сможете сделать что-то подобное, когда получите данные

const myRows: Row[] = this.state.data;
for (const row of myRows) { console.log(myRow[0]); }

Answer 3

В представленном формате нет row.В журнале также есть ненужное место.Попробуйте console.log(this.state.data[0];