Блог

Я разрабатываю экран для отображения данных на основе результатов поиска. Ниже приведен вывод JSON. Когда я нажимаю результат поиска ниже, вызывается компонент. На экране результатов мне нужны данные id, name и table1, table2. Table1 и Table2 являются вложенными выходными данными, и они будут отображаться в таблице React или таблице данных (следующий шаг)

Проблема: невозможно отобразить StudyData.table1.name

Опробованные варианты

1. useEffect()

• useEffect() может читать StudyData.studyname, но не StudyData.table1.name
• Присваивается переменной
• Присвоено состоянию

2. Рендеринг пытался использовать map для вложенных документов

Поиск: сбой только при первой загрузке и обновлении. Я попытался прокомментировать -> сохранить-> загрузить -> удалить комментарии и сохранить. Затем работает (при загрузке компонента). Я что-то упускаю при первой загрузке или обновлении. Пожалуйста, помогите

 [
  {
    "id": "DD3",
    "studydate": "DDD",
    "studydescription": "DD3 Description",
    "studyname": "DD3",
    "table1": [
      {
        "no": "1",
        "name": "DD3 Name",
        "date": "Krishna",
        "descriptionr": "1111r"
      },
      {
        "no": "2",
        "name": "DD3 Nam2",
        "date": "Test2",
        "descriptionr": "2222r"
      },
      {
        "no": "3",
        "name": "DD3 Name3",
        "date": "Test3",
        "descriptionr": "3333"
      }
    ],
    "table2": [
      {
        "No": "2",
        "Study Field1": "21",
        "Study Field2": "22",
        "Study Field3r": "23"
      }
    ],
    "table3": [
      {
        "No": "3",
        "Study Field5": "T31",
        "Study Field6": "T32",
        "Study Field7": "T33",
        "Study Field 8r": "T34"
      }
    ],
    "_rid": "QeNcANZFTTIKAAAAAAAAAA==",
    "_self": "dbs/QeNcAA==/colls/QeNcANZFTTI=/docs/QeNcANZFTTIKAAAAAAAAAA==/",
    "_etag": ""33002e92-0000-0200-0000-5fa6fe320000"",
    "_attachments": "attachments/",
    "_ts": 1604779570
  }
]
  

КОД КОМПОНЕНТА

 
    import React, { useEffect } from "react";
    import api from "./UploadStudyFilesapi";
    import { DataGrid } from "@material-ui/data-grid";

    export default function StudyDisplay(props) {
    let myData = props.Study;
    const [StudyData, setStudyData] = React.useState([]);
    const [Table1Rows, setTable1Rows] = React.useState([]);

    useEffect(() => {
        // Update the document title using the browser API
        api.getStudy(myData.studyname).then((json) => setStudyData(json));
        console.log(StudyData.studyname); //works
        //console.log(StudyData.table1.no) //doesn't work

        let myTable = StudyData.table1;
        console.log(myTable);

        setTable1Rows(StudyData.table1);
        console.log(Table1Rows);
    }, [myData]);

    return (
        <div>
        {StudyData.length === 0 ? (
            <h1>Loading...</h1>
        ) : (
            StudyData.map((item) => (
            <div key={item.studyname}>
                {item.studyname}
                {/* DOESNT WORK first brose or refresh*/}
                {item.table1.map((key2) => (
                <div>
                    {console.log(key2.name)}
                    {key2.name}
                    {/* Want to pass Key2 to DataGrid or React-Table */}
                    {/* <DataGrid rows={key2} columns={{field1:"No"}} /> */}
                </div>
                ))}
            </div>
            ))
        )}
        </div>
    );
    }