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}的对象）。如果要渲染集合对于儿童，请使用数组代替，或使用React附加组件中的createFragment（object）包装对象。请检查StudentShow的render方法。”我了解我在指向用户对象中的一个对象时遇到了问题，但是我不知道如何处理错误提出的建议。此外，如果我尝试将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到达主体，并通过迭代获取每个相关的工具，该工具进入sections数组，最后将instrumentSections的状态设置为等于sections

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

2 个答案: