Невозможно установить объект JSON для массивов в React js с помощью функции axios.get и отобразить объект массивов в таблице.

Question

У меня есть JSON API, как это -----

{
    "result": [
        {
            "date": "2019/10/14",
            "a": "T",
            "b": "S",
        },
        {
            "date": "2020/10/14",
            "a": "T",
            "b": "S",
        }
              ]
}

Я хочу использовать этот JSONAPI выше для отображения данных в таблице с помощью реагирования js: Вот как я отображаю данные из JSONAPIиспользуя функцию axios.get ----

import React, { Component } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { connect } from 'react-redux';
import axios from 'axios';




class keyValue extends React.Component {
  state = { value: [],
    keyValues: []
 };

  componentDidMount() {   
      return axios.get(ApiURL)
      .then(res => {       
        const value= res.data.result;                     
        this.setState({ value});  
        console.log(value);       
      }).catch(err => console.log(err))
}
  render(){ 

  return (

    <Paper >
     <Table aria-labelledby="DATA">
        <TableHead>
        <TableRow>
            <TableCell align="center"></TableCell>
            <TableCell align="center"></TableCell>                 
          </TableRow>       
        </TableHead>
        <TableBody>        
          {this.state.value.map((i) => (
            <TableRow key={i}>
              <TableCell component="th" scope="row">
                {i}
              </TableCell>
              <TableCell>{this.state.value[i]}</TableCell> 

            </TableRow>
          ))}
        </TableBody>

      </Table>
    </Paper>
  );
}
}

export default KeyValue;

Я хочу отобразить вывод в таблице следующим образом ----

, если выбран индекс [0], тогдазначение должно быть

 date  2019/10/14
 a     T
 b     S

Проблема ---- Я не получаю приведенную ниже ошибку в консоли при попытке установить значение: - "Объект не поддерживает свойство или метод 'map'"

Answer 1

this.state.value - это массив объектов, что означает, что i - это объект, когда вы используете this.state.value.map((i) =>.

Вы используете его в качестве индекса: this.state.value[i]

Посмотрите на Array.map и либо используйте i в качестве объекта, либо используйте второйпараметр для индекса

Я думаю, вы должны обновить свой код примерно так:

{this.state.value.map((val, index) => <TableRow key={index}>
    <TableCell component="th" scope="row">
       date: {val.date}
    </TableCell>
    <TableCell component="th" scope="row">
       a: {val.a}
    </TableCell>
    <TableCell component="th" scope="row">
       b: {val.b} 
    </TableCell>
  </TableRow>
}

Это выведет свойства каждого объекта в this.state.value в каждую ячейку таблицы. Вы можете обновить это, чтобы удовлетворить ваши потребности

Answer 2

Вы неправильно поняли это

this.setState({...this.state, value: result})

, а затем попробуйте это

{this.state.value.map((v, i) => (
            <TableRow key={i}>
              <TableCell component="th" scope="row">
                {i}
              </TableCell>
              <TableCell>{v.date}</TableCell> 

            </TableRow>
          ))}