javascript - 如何使用 componentDidMount() 发出多个 axios.get() 请求并将第一个响应值分配给第二个？

Question

我正在尝试使用 Wordpress REST API 构建一个 Web 应用程序。

我正在向端点发出初始 GET 请求，并解析 res.data 以获取一些值。但是，其中一个值 featured_media 是我尝试发出的第二个 GET 请求的参数。我发现很难将该值从该状态转移到第二个 GET 请求上。

以下是各州。

state = {
        graduatepost: {},
        category: '',
        featured_media: '',
        imgURL: '',
        isLoaded: false
    }

这里是componentDidMount()

componentDidMount() {
        const { featured_media } = this.props;

        axios.get(`http://localhost:8000/wp-json/wp/v2/blog/${this.props.match.params.id}`)
            .then(res => this.setState({
                graduatepost: res.data,
                category: res.data.categories[0],
                featured_media: res.data.featured_media,
                isLoaded: true
            }))
            .catch(err => console.log(err));

        const getImageURL = axios.get(`http://localhost:8000/wp-json/wp/v2/media/${featured_media}`);

        Promise.all([getImageURL]).then(res => {
            this.setState({
                imgURL: res[0].data.media_details.sizes.full.source_url,
                isLoaded: true
            });
        });
    }

第一个 GET 请求:http://localhost:8000/wp-json/wp/v2/blog/${this.props.match.params.id}

第二个 GET 请求:http://localhost:8000/wp-json/wp/v2/media/${featured_media}

如您所见，第二个请求需要第一个 GET 请求的响应中的值 featured_media。

我正在像这样渲染组件。

render() {
        const { graduatepost, category, isLoaded, featured_media, imgURL } = this.state;
        if(isLoaded) {
            return (
                <Styles>
                    <Fragment>
                        <Link to='/graduate-posts'>Go Back</Link> // Ignore this
                        <hr />
                        <h1>{graduatepost.title.rendered}</h1>
                        <div dangerouslySetInnerHTML={{__html: graduatepost.content.rendered}}></div>
                        <h4>Category: {category}</h4>
                        <h4>featured_media: {featured_media}</h4>
                        <h4>imgURL: {imgURL}</h4>
                    </Fragment>
                </Styles>
            )
        }
        return <h3>Loading...</h3> // Ignore this
    }

当我渲染组件时。第二个 GET 请求出现 404 控制台错误，其中指出。

GET http://localhost:8000/wp-json/wp/v2/media/undefined 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

我假设这是因为 featured_media 为空/未定义，但我无法弄清楚如何从第一个 GET 请求、响应中提取该值。

这似乎是一个显而易见的问题，但我对于同时使用 React.js 和 API 还比较陌生。我们将非常感谢您的帮助。

谢谢。

Answer 1

立即访问设置数据的最佳方法是使用 callback .

this.setState 接受回调作为其第二个参数 (setState(updater, [callback]))，因此我们应该在我们的回调语句。

你的代码应该是这样的:

axios
  .get(`http://localhost:8000/wp-json/wp/v2/blog/${this.props.match.params.id}`)
  .then((res) =>
    this.setState(
      {
        graduatepost: res.data,
        category: res.data.categories[0],
        featured_media: res.data.featured_media,
        isLoaded: true,
      },
      () =>
        axios
          .get(
            `http://localhost:8000/wp-json/wp/v2/media/${this.state.featured_media}`
          )
          .then((res) => {
            this.setState({
              imgURL: res[0].data.media_details.sizes.full.source_url,
              isLoaded: true,
            })
          })
    )
  )
  .catch((err) => console.log(err))