反应：无法呈现嵌套的 json 数据

Question

I have a nested json running in my local server and I'm trying to practice react by being able to output this nested data. For this one, I'm trying to just show the day and output available time-slots during the day. I'm at the stage of trying to reach outputting each "slot" and will be putting more features using buttons/toggles.

With the following codes, I can only get up to what I think is fetching the "days"(mon,tues...). Correct me if I'm wrong, but I think they're only parsed as strings instead of maintaining as objects or arrays so I don't notice that I can fetch the "slots". The other evidence is that when I try to map a "day", it's mapping the string.

I think my issue is that I haven't understood and lose track of props when it's being passed down the component tree. The tutorials and guides explain the general sense of mapping, but I either lost a specific detail to maintain props or I'm doing something wrong with mapping, in general.

Also, as you can probably tell, this is my first code-related post on the internet. I'd like to also ask for your tip of asking or giving helpful feeds with regards to coding (or like pet-peeves). I'd like to be more involved with these resources to test/practice my knowledge with other people's problems.

And of course, nit-pick any preferable react syntax. I'm only a week old in this and trying to absorb as much information about react as I can.

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: {}
      }
    }
  ];

App

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

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

export default App;

Advisors

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;

Availability

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

The issue is the way you're passing props. Notice this line

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

Object.keys(advisor.availability) returns the array [mon, tues, wed, thu, fri] . Now, in arr.map((day,key)=>{}) , day takes the values mon,tues,wed,etc. one by one and it's a string which you're passing on as props to <Availability/>

In order to pass the value object, it should be

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

Now, another issue is in your advisor object. Notice monday key in your object. It's having the same key slot multiple times, which isn't allowed in a JS object so JS will replace it with the last slot and you end up having just 1 slot.

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 }
}

You can fix it in two ways(maybe more).

1. Change keys to slot1, slot2, etc. Ex.,

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 }
}

and in Availability.js , replace this code

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

with this

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

2. Another way is to defined it as array. Ex.

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 }
]

and in Availability.js , replace this code

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

with this

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

Answer 2

You have to pass both the keys and values of availability into your child < Availability /> component.

First and foremost, you should ensure the keys within your availability object from your HTTP request are unique. Currently, all of them have the same key, slot . You can consider changing the names to slot1 , slot2 , etc.

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
      }
    }
  ];

On your parent Advisors component, this is what you need to change. As you can see, you will need to pass in the entire availability object into your child component, such that the data is available for rendering.

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

And on your child Availability component,

you will need to map and render the availability start times that is passed into it as the props.

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

I have created a demo over here.