反应：无法渲染嵌套的json数据

Question

我在本地服务器中运行了一个嵌套的json，我正在尝试通过能够输出此嵌套数据来练习React。对于这个，我试图仅显示日期并输出白天的可用时隙。我正处于尝试输出每个“插槽”的阶段，并将使用按钮/切换放置更多功能。

使用以下代码，我只能了解我认为正在获取的“日子”（星期一，星期二...）。如果我错了，请指正我，但是我认为它们仅被解析为字符串，而不是作为对象或数组进行维护，因此我不会注意到我可以获取“插槽”。另一个证据是，当我尝试映射“天”时，它正在映射字符串。

我认为我的问题是，当道具沿着组件树传递时，我还不了解并失去对道具的跟踪。教程和指南解释了一般的映射感，但是我要么丢失了维护道具的特定细节，要么总体上我在做错事情。

另外，您可能会说，这是我在互联网上的第一篇与代码相关的文章。我也想请您提示有关编码的问题或提供有用的供稿（或喜欢小偷小摸）。我想更多地参与这些资源，以测试/练习我对其他人的问题的了解。

当然，还可以选择任何可取的react语法。我只有一个星期大，试图尽我所能吸收有关反应的信息。

json

const advisor = [
    {
      id: 2,
      name: { first: "John", last: "Doe" },
      email: "[email protected]",
      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: {}
      }
    }
  ];
App

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;

我在本地服务器中运行了一个嵌套的json，我正在尝试通过能够输出此嵌套数据来练习React。对于这个，我试图仅显示日期并输出可用的时隙...

Answer 1

问题是您传递道具的方式。注意这一行