反應：無法呈現嵌套的 json 數據

Question

我有一個嵌套的 json 在我的本地服務器中運行，我正在嘗試通過能夠輸出這個嵌套數據來練習反應。 對於這個，我試圖只顯示一天並輸出一天中可用的時間段。 我正處於嘗試輸出每個“插槽”的階段，並將使用按鈕/切換來放置更多功能。

使用以下代碼，我只能解決我認為獲取“天”（星期一，星期二......）的問題。 如果我錯了，請糾正我，但我認為它們僅被解析為字符串，而不是作為對象或數組進行維護，因此我沒有注意到我可以獲取“插槽”。 另一個證據是，當我嘗試映射“一天”時，它正在映射字符串。

我認為我的問題是當 props 被傳遞到組件樹時我沒有理解並且失去了對 props 的跟蹤。 教程和指南解釋了映射的一般意義，但我要么丟失了維護道具的特定細節，要么我在映射方面做錯了，總的來說。

此外，正如您可能知道的，這是我在互聯網上的第一篇與代碼相關的帖子。 我還想請教您關於編碼（或喜歡惹是生非）的詢問或提供有用信息的提示。 我想更多地參與這些資源，以測試/練習我對其他人問題的了解。

當然，挑剔任何更好的反應語法。 我在這方面只有一周大，並試圖盡可能多地吸收有關反應的信息。

json

const advisor = [
    {
      id: 2,
      name: { first: "John", last: "Doe" },
      email: "jdoe@harvard.edu",
      availability: {
        monday: {
          slot: { start: 1400, end: 1410, available: true, student: null },
          slot: { start: 1415, end: 1425, available: true, student: null },
          slot: { start: 1430, end: 1440, available: false, student: null },
          slot: { start: 1445, end: 1455, availabie: true, student: null }
        },
        tuesday: {},
        wednesday: {},
        thurday: {
          // slot1: { start: 1400, end: 1410, available: true, student: null },
          // slot2: { start: 1415, end: 1425, available: true, student: null },
          // slot3: { start: 1430, end: 1440, available: true, student: null },
          // slot4: { start: 1445, end: 1455, availabie: true, student: null }
        },
        friday: {}
      }
    }
  ];

應用程序

import React from "react";
import Advisors from "./components/advisors/advisors.jsx";

function App() {
  return (
    <div className="App">
      <Advisors />
    </div>
  );
}

export default App;

顧問

import React, { Component } from "react";
import Availability from "./availability/availability.jsx";

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

  componentDidMount = () => {
    this.fetchData();
  };

  fetchData = () => {
    fetch("/api/advisors")
      .then(response => response.json())
      .then(
        advisors => this.setState({ advisors })
      )
      .catch(error => console.log("Parse Failed", error));
  };

  render() {
    const { advisors } = this.state;

    return (
      <div>
        {advisors.map(advisor => {

          return (
            <div key={advisor.id}>
              <h2>
                {advisor.name.first} {advisor.name.last}
              </h2>
              <h6>{advisor.email}</h6>
              {Object.keys(advisor.availability).map((day, key) => (
                //keys = {mon, tues, wed, thu, fri}
                <Availability key={key} day={day} />
              ))}
            </div>
          );
        })}
      </div>
    );
  }
}

export default Advisors;

可用性

import React, { Component } from "react";

class Availability extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { day } = this.props;

    return (
      <div>
        <h4>{day}</h4>
        <ul>
          {Object.keys(day).map((x, i) => {
            return <li key={i}>{x.start}</li>;
          })}
        </ul>
      </div>
    );
  }
}

export default Availability;

Answer 1

問題是你傳遞道具的方式。 注意這一行

Object.keys(advisor.availability).map((day, key) => (
   //keys = {mon, tues, wed, thu, fri}
   <Availability key={key} day={day} />
))

Object.keys(advisor.availability) [mon, tues, wed, thu, fri] Object.keys(advisor.availability)返回數組[mon, tues, wed, thu, fri] 。 現在，在arr.map((day,key)=>{}) ，day 取值為mon,tues,wed,etc. 一個接一個，它是一個字符串，您將其作為道具傳遞給<Availability/>

為了傳遞值對象，它應該是

Object.keys(advisor.availability).map((day, key) => (
   <Availability key={key} day={advisor.availability[day]} />
))

現在，另一個問題出現在您的advisor對象中。 注意對象中的monday鍵。 它具有相同關鍵字slot多次，這是不是在JS對象允許所以JS會用最后一個插槽代替它，你最終不得不僅有1插槽。

monday: {
  slot: { start: 1400, end: 1410, available: true, student: null },
  slot: { start: 1415, end: 1425, available: true, student: null },
  slot: { start: 1430, end: 1440, available: false, student: null },
  slot: { start: 1445, end: 1455, availabie: true, student: null }
}

您可以通過兩種方式（也許更多）修復它。

1. 將密鑰更改為 slot1、slot2 等。例如，

monday: {
  slot1: { start: 1400, end: 1410, available: true, student: null },
  slot2: { start: 1415, end: 1425, available: true, student: null },
  slot3: { start: 1430, end: 1440, available: false, student: null },
  slot4: { start: 1445, end: 1455, availabie: true, student: null }
}

並在Availability.js ，替換此代碼

{Object.keys(day).map((x, i) => {
  return <li key={i}>{x.start}</li>;
})}

有了這個

{Object.keys(day).map((x, i) => {
  return <li key={i}>{day[x].start}</li>;
})}

2. 另一種方法是將其定義為數組。 前任。

monday: [
  { start: 1400, end: 1410, available: true, student: null },
  { start: 1415, end: 1425, available: true, student: null },
  { start: 1430, end: 1440, available: false, student: null },
  { start: 1445, end: 1455, availabie: true, student: null }
]

並在Availability.js ，替換此代碼

{Object.keys(day).map((x, i) => {
  return <li key={i}>{x.start}</li>;
})}

有了這個

{day.map((x, i) => {
  return <li key={i}>{x.start}</li>;
})}

Answer 2

您必須將availability的鍵和值傳遞給您的子< Availability />組件。

首先，您應該確保來自 HTTP 請求的availability對象中的鍵是唯一的。 目前，它們都具有相同的密鑰slot 。 您可以考慮將名稱更改為slot1 、 slot2等。

const advisor = [
    {
      id: 2,
      name: { first: "John", last: "Doe" },
      email: "jdoe@harvard.edu",
      availability: {
        monday: {
          slot1: { start: 1400, end: 1410, available: true, student: null },
          slot2: { start: 1415, end: 1425, available: true, student: null },
          slot3: { start: 1430, end: 1440, available: false, student: null },
          slot4: { start: 1445, end: 1455, availabie: true, student: null }
        },
        // others
      }
    }
  ];

在您的父Advisors組件上，這是您需要更改的內容。 如您所見，您需要將整個availability對象傳遞到您的子組件中，以便數據可用於呈現。

{Object.keys(advisor.availability).map((day, key) => (
  <Availability key={key} day={day} availability={advisor.availability[day]}/>
))}

在您的孩子Availability組件上，

您需要映射和呈現作為道具傳遞給它的可用性開始時間。

<ul>
  {Object.keys(availability).map((x, i) => {
    return <li key={i}>{availability[x].start}</li>;
  })}
</ul>

我在這里創建了一個演示。