Question

首先，我使用componentWillMount()填充articles属性（这有效，没问题）。我迭代这些值以在某些容器/组件上显示不同的图像/文本。

我现在遇到的问题是我现在还想使用componentWillMount用单个图像填充background属性。我认为我可以使用''而不是[]，但我不确定如何进行这两个API调用。

我做了足够多的研究，知道我的答案可能在于承诺，但我无法从例子中推断它们如何适用于我的特定问题。有任何想法吗？

constructor(props) {
  super(props);
  this.state = {
    articles: [],
    backgroundz: '',
  };
}


componentWillMount() {
    fetch('http://localhost:8000/api/getArticles')
    .then(function (response) {
      return response.json();
    })
    .then(function (json) {
      this.setState({
        articles: json,
      });
  }.bind(this));

  fetch('http://localhost:8000/api/getBackground')
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    this.setState({
      backgroundz: json,
    });
  }.bind(this));
}

Answer 1

根据the React documentation

，您将要在componentDidMount中执行初始AJAX请求

除此之外，这些获取请求的语法略有不同。如果它们不会在构造函数中使用，也没有理由将props传递给构造函数或者超级构造函数，无论如何通常应该避免使用它们。我重构它看起来像这样：

constructor() {
  super();
  this.state = {
    articles: [],
    backgroundz: '',
  };
}


componentDidMount() {
  fetch('http://localhost:8000/api/getArticles')
    .then(response => response.json())
    .then(articles => this.setState({ articles });

  fetch('http://localhost:8000/api/getBackground')
    .then(response => response.json())
    .then(backgroundz => this.setState({ backgroundz });

  }
}

componentWillMount中的多个fetch语句

1 个答案: