javascript - 在 React JS 中如何处理响应对象

Question

我正在使用 React 来完成其余应用程序的前端。

我有 json 被发送到前端，我使用 fetch 。

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

所以我可以控制台记录每个 task.name，但现在该去哪里呢？如何让我的组件将每个任务显示为

？

基本上，这种逻辑在组件中的什么位置？我是否将获取请求保存到一个变量然后 setState = variable？

这是我的组件:

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

Answer 1

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

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>
    )
  }
}

编辑:重新阅读这个答案，我只是想注意在这种情况下没有必要初始化状态对象的 tasks 属性。你也可以只做这样的事情:

this.state = {}

但是，我认为显式命名状态对象的各种属性有一些值(value)，即使它们被初始化为 null。这允许您编写其状态记录在构造函数中的组件，并防止您或您的团队成员以后猜测组件的状态是如何建模的。