如何从响应主体中获取深度嵌套的数据进入状态

Question

I've created a show page in react that is supposed to display the name of the selected student, the instrument(s) they play, and their assignments.

The database (simplified): user(student) data >many-to-many-relationship< instrument >many-to-many-relationship< assignment

While I can pull a single user(student) object into state and display that student's name, accessing the associated instrument(s) and assignment(s) has been stumping me.

Here's what the body.user looks like when I log it to the console:

{user: {…}}
  user:
    assignments: Array(1)
      0: {id: 6, name: "Concert Cb Scale", description: "Record this 
         scale to Ensemble at the start of the …nscribe the scale if 
         your instrument requires it!", created_at: "2018-11- 
         24T22:16:51.460Z", updated_at: "2018-11-24T22:16:51.460Z"}
      length: 1
    __proto__: Array(0)
  first_name: "June"
  id: 10
  instrument_sections: Array(1)
    0: {id: 7, instrument: "french horn", created_at: "2018-11- 
       24T22:16:51.356Z", updated_at: "2018-11-24T22:16:51.356Z"}
    length: 1
    __proto__: Array(0)
  last_name: "Cenadaigh"

I can't seem to get at body.user.instrument_sections (and thenceforth to instrument: ). I haven't attempted getting at body.user.assignments since it looks to me like I'll get the same errors.

The error in question is, from the console: "Error in fetch: Objects are not valid as a React child (found: object with keys {id, instrument, created_at, updated_at}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of StudentShow ." I understand that it's having an issue that I'm pointing at an object within the user object, but I don't understand how to go about the suggestions the error makes. Furthermore, if I try to change this.setState({ . . . instrumentSections: body.user.instrument_sections to include .instrument , the console comes back with simply undefined .

My further attempts to get at instrument have come from:

1. Trying to figure out what should go between body.user.instrument_sections and .instrument (if anything).

2. How to map through body.user or the student state to get at the instrument and put it into state. (Eventually, I'll have seed data that will have students with multiple instruments instead of just one, so I have that state held in an array.)

And finally, here's the code I currently have:

class StudentShow extends Component {
  constructor(props){
    super(props)
    this.state = {
      student: {},
      instrumentSections: [],
      assignments: []
    }
  }
  componentDidMount(){
    let studentId = this.props.params.id
    console.log(`${this.props.params.id}`)
    fetch(`/api/v1/users/${studentId}`)
    .then(response => {
      if (response.ok) {
        return response;
      } else {
        let errorMessage = `${response.status} 
        (${response.statusText})`;
        error = new Error(errorMessage);
        throw(error);
      }
    })
    .then(response => response.json())
    .then(body => {
      console.log(body);
      this.setState({ student: body.user, instrumentSections: 
        body.user.instrument_sections })
      console.log(this.state.student);
      console.log(this.state.instrumentSections);
    })
    .catch(error => console.error(`Error in fetch: ${error.message}`));
  }
  render(){
    return (
      <div className="text-center student-show">
        <h1>{this.state.student.first_name} 
          {this.state.student.last_name}</h1>
        <h2>Your section(s): </h2>
        <h4></h4>
        <h2>This week's assignment(s): </h2>
        <h4></h4>
      </div>
    )
  }
}

Answer 1

As you can see in your console instrument_sections is an array of objects so to get the first instrument for example you should get it like:
body.user.instrument_sections[0].instrument .
and instead of instrumentSections: body.user.instrument_sections try
instrumentSections: body.user.instrument_sections.slice() or
instrumentSections: Array.from(body.user.instrument_sections)
and let me know if this solves your problem.

Answer 2

Me and the guy I worked with aren't sure if it's the most efficient method or if it's kosher with reactjs style, but at long last, the following javascript loop and accessories will work. After .then(response => response.json()) :

.then(body => { const sections = []; for(let i = 0; i < body.user.instrument_sections.length; i++){ sections.push(body.user.instrument_sections[i].instrument); };

And change the setState to this:

this.setState({ student: body.user, instrumentSections: sections)}

So what happens is js reaches into the body and through iteration grabs each relevant instrument, which goes into the sections array, and finally you set the state of instrumentSections equal to sections .