Javascript 如何处理react js中的响应对象

我正在使用react完成rest应用程序的前端

我将json发送到前端，并使用fetch

fetch('/task')
  .then(function(data) {
    return data.json();
  })
  .then(function(json) {
      json.tasks.forEach(function(task) {
      console.log(task.name)
      })
  });

所以我可以对每个task.name进行console.log操作，但是现在该去哪里呢？如何让组件将每个任务显示为

基本上，这种类型的逻辑在组件中的什么位置？我是否将提取请求保存到变量，然后设置state=variable

这是我的组件：

class Task extends React.Component {
  render() {
    return <p> hey </p>
  }
}

类任务扩展了React.Component{
render（）{
返回嘿

}
}

您需要初始化一个状态对象，在提取完成时可以更新该对象：

class Task extends React.Component {
  constructor () {
    super()

    this.state {
      tasks: null
    }
  }

  componentDidMount () {
    fetch('/task')
      .then((data) => {
        return data.json()
      })
      .then((json) => {
        this.setState({ tasks: json.tasks })
      })
  }

  renderTaskList () {
    if (this.state.tasks) {
      return (
        <ul>
          {this.state.tasks.map((task, i) => <li key={i}>{task.name}</li>)}
        </ul>
      )
    }

    return <p>Loading tasks...</p>
  }

  render () {
    return (
      <div>
        <h1>Tasks</h1>
        {this.renderTaskList()}
      </div>
    )
  }
}

---

但是，我认为显式命名state对象的各种属性是有价值的，即使它们被初始化为

null

。这允许您编写状态记录在构造函数中的组件，并防止您或您的团队成员以后猜测组件的状态是如何建模的。

setState可能是最好的方法。感谢您的解释。我不得不在fetch函数中添加arrow函数，但除此之外，这就很好地解决了问题。有两个问题需要跟进：1。在制作组件或根级组件时，是否总是使用构造函数（）和超级（）呢？2.在发出http请求时是否应该使用componentDidMount？并不总是使用这些。。。例如，您可能有一个无状态的函数组件，它不仅不使用构造函数，而且因为它不是类而不能使用。对于componentDidMount，这是一个获取数据的好地方。它保证您的状态已初始化（构造函数在此方法之前激发），并且在浏览器或服务器可以呈现此组件的意义上是“同构”的。因此，如果fetch不在服务器环境中，则在浏览器中运行之前不会触发。

this.state = {}