возникли проблемы с отображением данных, извлеченных из конечной точки приложения колбы

Question

Используя приложение create-реакции-приложение, я создал простое приложение React для отображения данных, полученных из конечной точки Flask.Хотя функция извлечения может извлекать данные из конечной точки HTTP, функция сопоставления не может прочитать полученные данные.Приложение выдает ошибки типа

TypeError: Cannot read property 'dataTime' of undefined
(anonymous function)
C:/Users/정보기획팀/Dropbox/yu_project/yu_blog_project/air_quality_react/src/DataList.js:10
   7 | return(
   8 |  <div>
   9 |      {data.map((datum, i) => {
> 10 |          return <Data key={i} time={datum[i].dataTime} pm10={datum[i].pm10Value} pm25={datum[i].pm25Value} />;
     | ^  11 |      })}
  12 |  </div>
  13 | )

App.js

import React, {Component} from 'react';
import './App.css';
import DataList from './DataList';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            airData: []
        };
    }

    componentDidMount() {
        fetch('http://210.123.33.247/airData')
      .then(response => response.json())
      .then(data =>
                this.setState({
                    airData: data
                })
            );
    }

    render() {
        const {airData} = this.state;
        console.log('air data from the state ', airData);
        return (
            <div className="App">
                <p>Data from the air quality</p>
                <DataList data={this.state.airData} />
            </div>
        );
    }
}

export default App;

И DataList.js

import React from 'react';
import Data from './Data';

const DataList = ({data}) => {
    console.log('from DataList', data[0]);
    console.log('pm value', data[3]);
    return (
        <div>
            {data.map((datum, i) => {
                return (
                    <Data
                        key={i}
                        time={datum[i].dataTime}
                        pm10={datum[i].pm10Value}
                        pm25={datum[i].pm25Value}
                    />
                );
            })}
        </div>
    );
};

export default DataList;

А Data.js

import React from 'react';

const Data = ({time, pm10, pm25}) => {
  return (
    <div>
      <p>{pm10}</p>
      <p>{pm25}</p>
      <p>{time}</p>
    </div>
  )
}

export default Data

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

Буду признателен, если кто-нибудь, пожалуйста, помогите мне найти ошибку.Большое спасибо.

Answer 1

map - это цикл for, который не может быть выполнен в операторе return.Поэтому удалите основной оператор возврата и замените const на приведенный ниже фрагмент кода

const DataList = ({data}) => {
  {data.map((datum, i) => {
     return (
       <Data
          key={i}
          time={datum[i].dataTime}
          pm10={datum[i].pm10Value}
          pm25={datum[i].pm25Value}
        />
      );
    })}
  );
};

. Для определения ошибки dataTime for undefined проверьте, есть ли входящие / входящие данные из flask в хэше,если это так, вы должны использовать Object.values(data.map((dataum, i) => {function})

Answer 2

Функция map является циклом for, первым параметром которого является объект, а не индекс, то есть

{data.map((datum, i) => {
            return (
                <Data
                    key={i}
                    time={datum[i].dataTime}
                    pm10={datum[i].pm10Value}
                    pm25={datum[i].pm25Value}
                />
            );
        })}

должно измениться на:

{data.map((datum, i) => {
                return (
                    <Data
                        key={i}
                        time={datum.dataTime}
                        pm10={datum.pm10Value}
                        pm25={datum.pm25Value}
                    />
                );
            })}