ReactJS-如何使用狀態在頁面之間傳遞JSON數據？

Question

我有一個頁面，顯示從REST API消耗的建築物的列表； 我的目標是在點擊建築物網址時在另一頁（詳細信息頁面）上顯示有關建築物的詳細信息。 問題是單擊該URL時，它將加載詳細信息頁面，但API中的任何數據均未顯示（內容為空白）

在“列出建築物頁面”上，我的網址設置如下 ：

<NavLink
          className="url-temp"
          to={`/buildingdetails/${building.crgBuildingid}`}
        >Details</NavLink>

**在“詳細信息頁面中，我設置了組件”：

import React, { Component } from "react";
import moment from 'moment';
import { getAuditTypeDescFromId, allAuditTypes, auditTypeToIdMap } from '../constants/audit-types';
import { getCodeTypeDescFromId, allCodeTypes, codeTypeToIdMap } from '../constants/code-types';
import { NavLink } from "react-router-dom";
import { withRouter } from 'react-router'

class Buildingdetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buildings: [],
            isLoaded: false,
        }
    }

    componentDidMount() {
        const buildingId = this.props.match.params.id;

        const url = `http://...../buildings/${buildingId}`
        fetch(url)
            .then(res => res.json())
            .then(buildings => {
                isLoaded: true,
                    this.setState({ buildings })
            });
    }

    render() {

        var { isLoaded, buildings } = this.state;
        if (!isLoaded) {
            return <div>Loading...</div>
        }
        else {
            // print properties from this.state.building.crgName
            return (
                <div className="appcontent-inner">
                    <p>Building Details</p>
                   <div>
                       {buildings.map(building => (
                           <div key={building.id}>
                                <b>Building Name:</b> this.state.building.crgName
                           </div>
                       ))};
                   </div>
                </div>
            );

        }
    }
}
export default withRouter(Buildingdetails);

這是JSON的詳細信息頁面的一個示例：

{
    "$id": "1",
    "Id": null,
    "crgName": “Walmart”,
    "crgManagerspecialistid": {
        "$id": "2",
        "Id": “00000-111-698-2333-123456”,
        “ContactName": "contact",
        "Name": “Jane Doe”,
        "KeyAttributes": [],
        "RowVersion": null
    },
    "crgOpeningdate": "2018-09-03T11:38:23",
    "crgManagerid": {
        "$id": "3",
        "Id": “0000-7312-e411-abcd-0050568571f6",
        "LogicalName": "crg_energyprogram",
        "Name": “Janet kay”,
        "KeyAttributes": [],
        "RowVersion": null
    }
}

我可以得到有關我要怎么做的一些指導嗎？ 先感謝您

Answer 1

嘗試更新您的componentDidMount() ，尤其是最后的then() 。 該塊具有可能導致問題的不同語法的組合。 需要將isLoaded放在要傳遞的setState()對象內部，以確保無論如何都可以對其進行更新。

componentDidMount() {
  const buildingId = this.props.match.params.id;
  const url = `http://...../buildings/${buildingId}`;

  fetch(url)
    .then(res => res.json())
    .then(buildings => {      
      this.setState({ isLoaded: true, buildings });
    });
  }

這也假設您的react-router-dom Route如下：

<Route path="/buildingdetails/:id" component={Buildingdetails} />

希望有幫助！