Question

我正在发出两个api GET请求，并且我都希望更新状态。由于某种原因，它仅使用第一个GET请求中的值进行更新。

我尝试使用传播运算符来更新状态，并从GET请求中将新值添加到当前状态（类别）。

axios // first get request
  .get(
    "LINK_TO_API"
  )
  .then(res => {
    this.setState({
      ...this.state.categories,
      categories: res.data.data
    });
  })
  .catch(function(error) {
    console.log(error);
  });
axios // second get request
  .get(
    "LINK_TO_API"
  )
  .then(res => {
    this.setState({
      ...this.state.categories,
      categories: res.data.data
    });
  })
  .catch(function(error) {
    console.log(error);
  });

我目前正在从第一个GET请求中获取10个值，并希望在通过类别进行映射时获得20个值的总和。

Answer 1

由于没有附加值，您永远不会获得20个值，而只是在每次调用中覆盖类别值。

this.setState({
  ...this.state.categories,
  categories: res.data.data
});

这里categories: res.data.data被覆盖。

只需将您的代码修改为：

 axios
  .get(
    "LINK_TO_API"
  )
  .then(res => {
    this.setState((state) => ({
      ...state,
      categories: [...state.categories, ...res.data.data]
    }));
  })
  .catch(function(error) {
    console.log(error);
  });

Answer 2

假设类别是array，则将一个数组替换为另一个数组。

在下面的代码中，我总是返回一个新数组，并将新数组与先前的数组一起隐藏。

axios // first get request
  .get('LINK_TO_API')
  .then(res => {
    this.setState({
      categories: [...this.state.categories, ...res.data.data]
    });
  })
  .catch(function(error) {
    console.log(error);
  });
axios // second get request
  .get('LINK_TO_API')
  .then(res => {
    this.setState({
      categories: [...this.state.categories, ...res.data.data]
    });
  })
  .catch(function(error) {
    console.log(error);
  });

Answer 3

首先，您的传播运算符是错误的，您必须将其包装到数组categories: [...this.state.categories, ...res.data.data]中。我也建议您等待所有帖子加载，然后将它们设置为状态：

Promise.all([axios.get('LINK_TO_API'), axios.get('LINK_TO_API_2')])
    .then(allYourPosts => {
        this.setState({ /* set it to state */ });
    })
    .catch((error) => {
        console.log(error);
    });

状态未通过API的get请求正确更新

3 个答案: