Question

我正在做出反应以完成休息申请的前端。

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

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

所以我能够console.log每个task.name，但到现在呢？如何让我的组件将每个任务显示为

？

基本上，组件中的哪种类型的逻辑出现了？我是否将获取请求保存到变量，然后是setState = variable？

这是我的组成部分：

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

Answer 1

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

#simulate user input
 userInput <- "Petal.Length"

 #Load the iris dataframe
 df <- iris

 #find the column that matches user input and rename it
 colnames(df)[colnames(df) == userInput] <- "spam"

 #Show the results
 head(df)
  Sepal.Length Sepal.Width spam Petal.Width Species
1          5.1         3.5  1.4         0.2  setosa
2          4.9         3.0  1.4         0.2  setosa
3          4.7         3.2  1.3         0.2  setosa
4          4.6         3.1  1.5         0.2  setosa
5          5.0         3.6  1.4         0.2  setosa
6          5.4         3.9  1.7         0.4  setosa

编辑：重新阅读这个答案，我只想注意在这种情况下没有必要初始化状态对象的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 = {}。这允许您编写状态在构造函数中记录的组件，并且将阻止您或您的队友稍后猜测组件的状态是如何建模的。

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

1 个答案: