时间戳

首页 > 解决方案 > React Project 中的数据未呈现到屏幕上

javascript - React Project 中的数据未呈现到屏幕上

问题描述

我有一个反应应用程序，我正在尝试将一些基本的 JSON 呈现到屏幕上。我将在下面放置一小段 JSON 对象。我正在尝试在研究页面中表示数据。我将把整个组件类放在下面。如果我可以提供任何进一步的信息来澄清，请告诉我。

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;

标签： javascriptreactjsreact-redux

解决方案

更新：

我让它工作了。

我在尝试显示数据时遇到的问题是渲染方法中的数据没有初始化，但是，如果你在 didmount 中进行映射，而且看起来你试图访问列表，所以你需要指定那。

const hits = data.hits.map((dataSet) => (
      <div key={dataSet.id}>
         <h3>{dataSet._index}</h3>
         <p>{dataSet.uri}</p>
       </div>
 ));

 this.setState({ data: hits, isLoading: false });


render() {
    const { error, isLoading, data } = this.state;
    if (error) {
        return <p style={{ color: "red" }}>{error.message}</p>;
    }
    if (isLoading) {
        return <p>Loading Data...</p>;
    } else {
        return (
            <div>
                <h1>Record MetaData</h1>
                {data}
            </div>
        );
    }

}

哦，还有，我把 db.json 放在公共目录中，然后按如下方式访问它，因为我找不到模块。

fetch("db.json", {
        headers: { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    }})
.then (...)

如何进行故障排除

要提供一些示例测试数据以查看它是否和 IO 问题，您可以手动将 json 对象转换为 javascript 对象，如下所示，

this.setState({ data: [
    { _index: 'ia', uri: 'ub' },
    { _index: 'ib', uri: 'ub' },
], isLoading: false });

更多解释

您遇到的问题

组件生命周期 - ComponentDidMount 将在渲染触发之后或同时触发。这引发了一个并发问题，您尝试映射的数据尚未使用。通过在 DidMount 中进行映射，确保只有在数据准备好后才执行它。与此同时，渲染中的 {data} 将为空，并且不会显示任何内容。如果您想对此进行测试，您可以在您的 didmount 中放置一个睡眠/块，并查看数据在块完成之前不会显示。

正确导航 json 对象 - 使用 data.map 而不是 data.hits.map 是针对整个 json 对象，而不是实际需要访问的特定列表“命中”（data.hits）。接下来，.map 函数遍历该列表，在每次迭代时提供“dataSet”，允许使用该值。

潜力 - 我通常不会从 json 文件中获取数据，而是从 web API 获取数据，所以我没有什么经验，但是，通常要访问该文件，您需要一个特殊的库，或者必须将文件放在可用的公共文件夹中在整个项目中。您可以通过 http://localhost:3000/db.json 进行测试

推荐阅读