React Project에서 데이터가 화면에 렌더링되지 않습니다.

기본 JSON을 화면에 렌더링하려는 반응 응용 프로그램이 있습니다. 아래에 JSON 객체의 작은 스 니펫을 배치하겠습니다. researchPage에서 데이터를 표현하려고합니다. 전체 구성 요소 클래스를 아래에 배치하겠습니다. 명확히하기 위해 추가 정보를 제공 할 수 있는지 알려주십시오.

db.json-데이터를 가져 오려는 JSON 파일입니다.

{

    "hits": [
        {
            "_index": "issflightplan",
            "_type": "issflightplan",
            "_key": "IDP-ISSFLIGHTPLAN-0000000000000447",
            "_version": 1,
            "_score": null,
            "ContentType": {
                "__deferred": {
                    "uri": "https://bi.sp.iss.nasa.gov/Sites/FP/_api/Web/Lists(guid'a9421c5b-186a-4b14-b7b2-4b88ee8fab95')/Items(252)/ContentType"
                }

researchPage-이것은 JSON 데이터도 렌더링하려는 구성 요소 페이지입니다. 콘솔을 봤는데 오류가 발생하지 않는 것 같습니다. 페이지가 표시되고 H1 레코드 메타 데이터도 화면에 렌더링되지만 그 아래에는 H3 또는 단락이 없습니다.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import data from "../../data/db.json";


console.log(data);
class ResearchPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            error: null,
            dataSet: [],
            data: [],
        }
    }

    componentDidMount() {
        this.setState({ isLoading: true });
        fetch(data)
            .then((res) => {
                debugger;
                if (res.ok) {
                    return res.json();
                } else {
                    throw Error("Error Fetching Data");
                }
            })
            .then((data) => {
                console.log(data);
                this.setState({ data: data, isLoading: false });
            })
            .catch((error) => {
                console.log((error) => this.setState({ error }));
            });
    }
    render() {

        const { error, isLoading, data } = this.state;
        const dataItems =  data.map((dataSet) => (
            <div key={dataSet.id}>
                <h3>{dataSet._index}</h3>
                <p>{dataSet.uri}</p>
            </div>
        ));
        if (error) {
            return <p style={{ color: "red" }}>{error.message}</p>;
        }
        if (!isLoading) {
            return <p>Loading Data...</p>;
        } else
            return (
                <div>
                    <h1>Record MetaData</h1>
                        {dataItems}
                </div>
            );
    }
}
export default ResearchPage;