Javascript 反应：呈现嵌套json数据时遇到问题

我在本地服务器上运行了一个嵌套的json，我试图通过输出这个嵌套数据来练习如何做出反应。对于这一个，我试图只显示一天并输出一天中可用的时间段。我正处于尝试输出每个“插槽”的阶段，并将使用按钮/切换来添加更多功能

使用以下代码，我只能获得我认为是获取“天”（周一、周二…）的内容。如果我错了，请纠正我，但我认为它们只被解析为字符串，而不是维护为对象或数组，因此我没有注意到我可以获取“插槽”。另一个证据是，当我试图映射“一天”时，它映射的是字符串

我认为我的问题是，当道具被传递到组件树时，我还没有理解并失去了对道具的跟踪。教程和指南解释了贴图的一般意义，但我要么丢失了维护道具的特定细节，要么总体上我在贴图方面做了一些错误的事情

另外，正如你可能知道的，这是我第一次在互联网上发布代码相关的帖子。我还想问一下你关于询问或提供有关编码的有用信息（或像宠物皮一样）的技巧。我希望更多地参与这些资源，以测试/实践我对他人问题的认识

当然，不要吹毛求疵。我只有一个星期大，正在尝试吸收尽可能多的关于react的信息

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;

从“React”导入React；
从“/components/Advisors/Advisors.jsx”导入顾问；
函数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}来自“React”；
从“/Availability/Availability.jsx”导入可用性；
类顾问扩展组件{
建造师（道具）{
超级（道具）；
此.state={
顾问：[]
};
}
componentDidMount=（）=>{
这是fetchData（）；
};
fetchData=（）=>{
获取（“/api/advisors”）
.then（response=>response.json（））
.那么(
advisors=>this.setState（{advisors}）
)
.catch（错误=>console.log（“解析失败”，错误））；
};
render（）{
const{advisors}=this.state；
返回(
{advisor.map（advisor=>{
返回(
{advisor.name.first}{advisor.name.last}
{advisor.email}
{Object.keys（advisor.availability）.map（（天，键）=>(
//键={周一、周二、周三、周四、周五}
))}
);
})}
);
}
}
出口违约顾问；

可用性

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;

import React，{Component}来自“React”；
类可用性扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
const{day}=this.props；
返回(
{day}

{Object.keys（day.map）（（x，i）=>{
返回
{x.start}
；
})}

);
}
}
导出默认可用性；

问题在于你传递道具的方式。注意这一行

Object.keys（advisor.availability）.map（（天，键）=>(
//键={周一、周二、周三、周四、周五}
))

Object.keys（advisor.availability）

返回数组

[周一、周二、周三、周四、周五]

。现在，在

arr.map（（day，key）=>{}）

中，day一个接一个地获取值

mon、tues、wed等

，它是一个字符串，作为道具传递给

为了传递值对象，它应该

Object.keys（advisor.availability）.map（（天，键）=>(
))

现在，另一个问题出现在

advisor

对象中。请注意

monday

输入对象。它多次使用同一个键

插槽
，这在JS对象中是不允许的，因此JS将用最后一个插槽替换它，而最终只有一个插槽

星期一：{
插槽：{start:1400，end:1410，available:true，student:null}，
插槽：{start:1415，end:1425，available:true，student:null}，
插槽：{开始：1430，结束：1440，可用：false，学生：null}，
插槽：{开始：1445，结束：1455，可用性：true，学生：null}
}

你可以用两种方法修复它（也许更多）

将键更改为slot1、slot2等。例如
星期一：{
slot1:{start:1400，end:1410，available:true，student:null}，
slot2:{开始：1415，结束：1425，可用：true，学生：null}，
slot3:{开始：1430，结束：1440，可用：false，学生：null}，
slot4:{开始：1445，结束：1455，可用性：true，学生：null}
}

在
Availability.js
中，替换此代码

{Object.keys（day.map）（x，i）=>{
返回
{x.start}
；
})}

用这个

{Object.keys（day.map）（x，i）=>{
return
{day[x].start}
；
})}

另一种方法是将其定义为数组。前
星期一：[
{开始：1400，结束：1410，可用：true，学生：null}，
{开始：1415，结束：1425，可用：true，学生：null}，
{开始：1430，结束：1440，可用：false，学生：null}，
{开始：1445，结束：1455，可用性：true，学生：null}
]

在
Availability.js
中，替换此代码

{Object.keys（day.map）（x，i）=>{
返回
{x.start}
；
})}

用这个

{day.map（（x，i）=>{
返回
{x.start}
；
})}
您必须将
可用性
的键和值传递给您的孩子
组件

首先，您应该确保HTTP请求中
可用性
对象中的密钥是唯一的。目前，它们都有相同的密钥，
slot
。您可以考虑更改名称T。
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
      }
    }
  ];

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

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