在 componentDidMount 中从一个 axios 获取数据到另一个答案

【问题标题】：Getting data from one axios to another in componentDidMount在 componentDidMount 中从一个 axios 获取数据到另一个
【发布时间】：2019-05-07 19:03:30
【问题描述】：

在 componentDidMount 中，我试图从 /api/topics/${params.TopicId 路由中获取名为 topic 的数据，然后从响应中我只想将 topic.user_id 发送到另一条路由并获取整个用户作为响应。但这不起作用，因为它们同时发送请求，因此 topic.user_id 的状态为空。这是一种我可以采取响应并将其提供给另一个请求的方式吗？我在 componentDidMount 中做，所以它会在组件渲染之前完成。

componentDidMount() {
    const {
      match: { params }
    } = this.props;

    axios
      .get(`/api/topics/${params.TopicId}`)
      .then(response => {
        this.setState({ topic: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });

    axios
      .get(`/api/users/${this.state.topic.user_id}`)
      .then(response => {
        this.setState({ user: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

【问题讨论】：

标签： javascript reactjs axios

【解决方案1】：

componentDidMount() {
  const {
    match: { params }
  } = this.props;

  fetch(`/api/topics/${params.TopicId}`,(response)=>{
    this.setState({ topic: response.data } , 
      {
        fetch(`/api/users/${this.state.topic.user_id}` ,(response)=>{
          this.setState({ user: response.data });
        } )
      });

}

const fetch = (uri,callBack) =>{
  axios
  .get(uri)
  .then(response => {
    callBack(response)
  })
  .catch(function(error) {
    console.log(error);
  });
}

最好使用设置状态回调参数

setState(updater[, callback])

https://reactjs.org/docs/react-component.html#setstate

因为您需要在下一次获取之前更新状态

【讨论】：

user_id 在上一个请求中返回，因此下一个请求可以立即开始...在这种情况下无需等待状态更新
你如何确定哪一行会先出现？ setState 还是 axios 得到的？他们机器人异步
查看我的答案...从第一个 axios.get 呼叫的响应中拉出 user_id，以便在第一个呼叫返回时立即开始下一个呼叫，同时设置 topic 部分状态。然后在第二个请求返回时设置user 状态。由于user 和topic 状态是独立的，它们可以按任何顺序设置，并且立即启动第二个请求将提高性能。

【解决方案2】：

您可以像这样将Promises 链接在一起：

componentDidMount() {
  const {
    match: { params }
  } = this.props;

  axios
    .get(`/api/topics/${params.TopicId}`)
    .then(response => {
      this.setState({ topic: response.data });
      return axios.get(`/api/users/${response.data.user_id}`);
    })
    .then(response => {
      this.setState({ user: response.data });
    })
    .catch(function(error) {
      console.log(error);
    });
}

【讨论】：

非常感谢，不知道你可以这样。非常容易理解和简短的解决方案：D

【解决方案3】：

你可以使用回调。

const func = (id, cb) => axios
  .get(`/api/topics/${id}`)
  .then(response => {
    this.setState({ topic: response.data });
    cb(response.data.user_id);
  })
  .catch(function(error) {
    console.log(error);
  });

这样，你就可以调用...

func(params.TopicId, user_id => axios
  .get(`/api/users/${user_id}`)
  .then(response => {
    this.setState({ user: response.data });
  })
  .catch(function(error) {
    console.log(error);
  })
)

【讨论】：