反应：无法呈现嵌套的 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>

我在这里创建了一个演示。