Question

我有一个从Rails后端获取的API，如下所示：

[
{
"id": 1,
"name": "Module 1",
"topics": [
{
"id": 1,
"name": "Iterators and Helpers",
"course_id": 1,
"resources": [
{
"id": 1,
"name": "Some Lecture",
"private": false,
"topic_id": 1,
"users": []
}
]
},
{
"id": 2,
"name": "Object Oriented Ruby",
"course_id": 1,
"resources": []
},
{
"id": 3,
"name": "One to Many Relationships",
"course_id": 1,
"resources": []
},

，依此类推。每个模块都有很多主题，每个主题都有很多资源。我认为状态需要看起来像这样嵌套，但我不确定：

state = {
    modules: [{
      topics: [{
        resources: []
      }]
    }]
  }

我也不确定如何在获取中设置状态，但是到目前为止，我有这样的事情：

componentDidMount(){
    fetch('http://localhost:3000/courses')
      .then(response => {return response.json()})
      .then(module => {
         this.setState({
           courses: module.map(individualModule => {return individualModule}).
            topics: module.map(individualModule => {
                 return individualModule.map(topic => {return topic}),
              resources: 'same thing but iterated over once again'

})
    })
  }

这是设置嵌套状态的正确方法吗？我的目的是在以后添加一个表格，该表格将允许用户创建新资源（POST请求），这将改变资源状态（进而改变主题和模块）。我还想显示每门课程，一旦单击，将显示其相应的主题，然后依次单击主题显示相应的资源-这就是为什么我需要所有3个状态。 ****也希望不要使用redux，因为它使我非常困惑。

如何设置此嵌套状态？

0 个答案: