如何使用 componentDidMount() 發出多個 axios.get() 請求並將第一個響應值分配給第二個？

Question

我正在嘗試使用 Wordpress REST ZDB974238714CA8DE634A7CE1D083A1 構建 web 應用程序。

我正在向端點發出初始 GET 請求並通過res.data解析以獲取一些值。 但是， featured_media的值之一是我嘗試發出的第二個 GET 請求的參數。 我發現很難從 state 到第二個 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

您是否嘗試過異步 function？ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

async componentDidMount() {
        ....
        await axios.get ...
        ....
}

Answer 2

立即訪問設置數據的最佳方法是使用callback 。

this.setState接受回調作為它的第二個參數（ setState(updater, [callback]) ），所以我們應該在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))

Answer 3

也許在第一個axios.get的響應中請求它。 它不起作用的原因是因為this.setState是 React 中的異步 function 所以當你在下面直接訪問它時它是undefined的。

嘗試類似：

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

Answer 4

我准備了一個示例，它顯示所有用戶，如果您單擊查看帖子按鈕，它將顯示該用戶的所有帖子。

應用程序.js

class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/posts">Posts</Link>
                        </li>
                    </ul>
                    <hr/>
                    <Switch>
                        <Route exact path="/">
                            <UserList/>
                        </Route>
                        <Route path="/posts">
                            <PostListPageByUser/>
                        </Route>
                    </Switch>
                </div>
            </Router>
        );
    }
}
export default App;

用戶列表組件

import React from 'react';
import axios from 'axios';
import PostListPageByUser from "./PostListPageByUser";
import {withRouter} from "react-router-dom";

class UserList extends React.Component {
    state = {
        users: [],
        showPostList: false,
        user: {}
    };

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                console.log(users);
                this.setState({users});
            })
    }

    handleClick = (user) => {
        console.log(user);
        this.setState({showPostList: true, user: user});
        this.props.history.push({
            pathname: '/posts',
            user: user
        });
    };

    render() {
        return (
            <div>
                <ul>
                    {this.state.users ? this.state.users.map(user => <div key={user.id}>
                        <span style={{minWidth: 400}}>{user.name} </span>
                        <button onClick={() => {
                            this.handleClick(user)
                        }}>See Posts
                        </button>
                    </div>) : null}
                </ul>
                {this.state.showPostList ? <PostListPageByUser user={this.state.user}/> : null}
            </div>
        )
    }
}

export default withRouter(UserList);

PostListByUser 組件

import React from "react";
import axios from 'axios';
import {withRouter} from "react-router-dom";

class PostListPageByUser extends React.Component {
    signal = axios.CancelToken.source();
    state = {
        posts: [],
    };

    componentDidMount() {
        if(!this.props.location.user){
            alert('Please click see posts button');
            this.props.history.push('/');
            return;
        }
        axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${this.props.location.user.id}`, {
            cancelToken: this.signal.token,
        })
            .then(res => {
                this.setState({posts: res.data});
                console.log(res.data, 'Posts');
            }).catch(err => {
            console.log(err);
        });
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.posts ? this.state.posts.map(post => <li key={post.id}>{post.title}</li>) : null
                    }
                </ul>
            </div>
        )
    }
}

export default withRouter(PostListPageByUser);