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

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，因为在我看来我会遇到同样的错误。

有问题的错误是，来自控制台："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."我知道它有一个问题，我指向用户对象中的一个对象，但我不知道如何去做错误提出的建议。此外，如果我尝试将 this.setState({ . . . instrumentSections: body.user.instrument_sections 更改为包含 .instrument，控制台会返回 undefined.

我对 instrument 的进一步尝试来自：

试图找出 body.user.instrument_sections 和 .instrument 之间的内容（如果有的话）。
如何map通过body.user或student状态到达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 进入 body 并通过迭代获取每个相关的工具，这些工具进入 sections 数组，最后您将 instrumentSections 的状态设置为相等至 sections.

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

How to fetch deeply nested data from the response body into state

javascript

stateful

fetch

reactjs