Question

在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);
      });
  }

Answer 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

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

Answer 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);
    });
}

Answer 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);
  })
)

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

3 个答案: