无法在我的 React WP RestFul API 上读取未定义的属性(读取"数据")

Question

我的代码工作得很好，直到我添加了一个新的博客文章，我在我的控制台上得到了这个错误，使我的React应用程序变成空白。查看后，我无法解决这个问题。

下面是我的代码:

import React from "react";
import { Link, NavLink } from "react-router-dom";
import axios from "axios";
import renderHTML from "react-render-html";
import Loader from "../img/loader.gif";
import { formatDistanceToNow } from 'date-fns';
class Blog extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
posts: [],
error: "",
};
}
componentDidMount() {
const wordPressSiteUrl = "https://my-api-site-address";
this.setState({ loading: true }, () => {
axios
.get(`${wordPressSiteUrl}/wp-json/wp/v2/posts/?per_page=10`)
.then((res) => {
this.setState({ loading: false, posts: res.data });
})
.catch((error) =>
this.setState({ loading: false, error: error.response.data.message })
);
})
}
render() {

const { posts, loading , error } = this.state;
return (
<div>
<main>
<div id="heading">
<h2>Latest News</h2>
</div>
{error && <div className="alert alert-danger">{error}</div>}

{posts.length ? (
<article>
{posts.map((post) => (
<div
key={post.id}
id="blogrow"
className="row"
style={{
backgroundColor: "rgb(50,52,54)",
marginBottom: "10px",
paddingBottom: "10px",
}}
>
<div className="col-4 resize">
<img className="postimg"
src={post.better_featured_image.source_url}
style={{
borderRadius: "10px"
}}
alt="{post.title.rendered}"  
/>
</div>
<div className="col-8 blogcol-8">
<h3 id="blogheadercss">
<Link to={`/posts/${post.id}`} dangerouslySetInnerHTML={{ __html: post.title.rendered}} style={{ color: "#FFC107" }}></Link>
</h3>
<p id="blogcontentcss">
{renderHTML(post.excerpt.rendered)}
</p>
<div className="col">
<div className="row mt">
<div className="col-lg-6 col-md-6 col-sm-6">
<button id="datetime" className="btn btn-outline-warning btn-sm">
{ post.x_date }
</button>
</div>
<div className="col-lg-6 col-md-6 col-sm-6">
<div
id="readmore"
className="btn btn-outline-primary btn-sm"
>
<Link to={`/posts/${post.id}`} style={{ color: "white" }}>
Read More
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
))}
</article>
) : (
""
)}
{ loading && <img className="loader" src={Loader} alt="Loading" /> }
</main>
<div
className="container"
style={{
marginTop: "10px",
paddingRight: "50px",
textAlign: "right",
}}
>
<button className="btn btn-outline-primary">
<NavLink exact to="/blogs">
Explore More
</NavLink>
</button>
</div>
</div>
);
}
}
export default Blog;

我想修复一个错误与自动取回API每5分钟。

如果有人能帮我解决，我会很高兴的。由于

Answer 1

有一个CORS preflight，基本上如果你发出请求，它会先发送OPTIONS

这就是res未定义且res.data无法读取的原因因此，首先创建一个条件语句，它只在res未定义时运行

Answer 2

componentDidMount函数应该这样修改

componentDidMount() {
const wordPressSiteUrl = "https://my-api-site-address";
this.setState({ loading: true }, () => {
axios
.get(`${wordPressSiteUrl}/wp-json/wp/v2/posts/?per_page=10`)
.then((res) => {
if(res)
this.setState({ loading: false, posts: res.data });
})
.catch((error) =>
this.setState({ loading: false, error: error.response.data.message })
);
})
}