Я пытаюсь создать веб-приложение с Wordpress REST API.
Я делаю первоначальный запрос 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
});
});
}
1-й GET-запрос: http://localhost:8000/wp-json/wp/v2/blog/${this.props.match.params.id}
2-й GET-запрос : http://localhost:8000/wp-json/wp/v2/media/${featured_media}
Как видите, для 2-го запроса требуется значение featured_media
, которое находится в ответе на 1-й запрос GET.
Я представляю компонент следующим образом.
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
}
Когда я выполняю рендеринг компонента. Существует ошибка консоли 404 для второго запроса GET, в которой говорится.
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. Ваша помощь будет принята с благодарностью.
Спасибо.