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

Question

我已经在react中创建了一个显示页面，该页面应该显示所选学生的姓名，他们演奏的乐器以及他们的作业。

数据库（简化）：用户（学生）数据>多对多关系<仪器>多对多关系<分配

虽然我可以将单个用户（学生）对象拉入状态并显示该学生的姓名，但是访问相关的乐器和作业却令我很困扰。

这是我将它登录到控制台时body.user外观：

{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"

我似乎无法获得在body.user.instrument_sections （和此后到instrument: ）。 我没有尝试过body.user.assignments因为在我看来，我会遇到相同的错误。

有问题的错误来自控制台：“提取错误：对象作为React子对象无效（找到：键为{id，instrument，created_at，updated_at}的对象）。如果要渲染子代集合，使用数组代替或包裹使用createFragment（对象）从阵营附加的对象。检查的渲染方法StudentShow “。 我了解我在指向用户对象中的一个对象时遇到了问题，但是我不知道如何处理错误提出的建议。 此外，如果我尝试将this.setState({ . . . instrumentSections: body.user.instrument_sections为包括.instrument ，则控制台将返回undefined 。

我进一步尝试使用instrument来自：

1. 试图弄清楚body.user.instrument_sections和.instrument之间应该有什么关系（如果有的话）。

2. 如何通过body.user或student状态进行map以获取instrument并将其置于状态。 （最终，我将获得种子数据，这些数据将使学生拥有多种乐器，而不仅仅是一种乐器，因此该状态保存在数组中。）

最后，这是我当前拥有的代码：

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

如您在控制台中所看到的， instrument_sections是一个对象数组，因此，例如，要获取第一个乐器，您应该像这样获取它：
body.user.instrument_sections[0].instrument 。
而不是instrumentSections: body.user.instrument_sections试试
instrumentSections: body.user.instrument_sections.slice()或
instrumentSections: Array.from(body.user.instrument_sections)
让我知道这是否解决了您的问题。

Answer 2

我和与我一起工作的人不确定这是否是最有效的方法，还是不知道它是否采用reactjs样式，但最终，以下javascript循环和附件将正常工作。 在.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); };

并将setState更改为此：

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

所以会发生什么是JS达到进入体内，并通过反复争夺每一个相关的仪器，该仪器进入sections阵列，最后你设定的状态instrumentSections等于sections 。