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

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

假设 categories 是一个 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 2

你永远不会得到 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 3

首先，你的展开运算符是错误的，你必须把它包装成数组categories: [...this.state.categories, ...res.data.data]。另外，我建议您等待所有 post 加载完毕，然后将它们设置为状态：

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 的获取请求正确更新

State not updating correctly with get request from API

reactjs

axios

react-state