使用 React 从 WP REST API 获取 'title'

Question

我正在尝试从 Wordpress REST API 获取一些数据以在我的 React 应用程序中呈现它。例如 'title'、'date' 和 'content'。这是我的代码：

class App extends React.Component {

  constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

 componentDidMount() {
       return fetch(`https://example.com/wp-json/wp/v2/posts?per_page=100`)
       .then((response) => response.json())
       .then((responseJson) => {
         const { title, date, content } = responseJson;
         this.setState({ title, date, content });
       })
       .catch((error) => {
         console.error(error);
       });
 }

 render() {
   return (
      <div>
        <h1> {this.state.title.rendered} </h1>
        <h3> {this.state.date} </h3>
        <p> {this.state.content.rendered} </p>
      </div>
   );
 }
}

export default App;

但这给了我 'title' 和 'content' 的以下错误：

TypeError: Cannot read property 'rendered' of undefined

我在这里做错了什么以及如何解决这个错误？

Answer 1

首先，访问WordPressAPI需要验证参数，请确认。示例：

Request: GET https://<domain-name>/wp-json/wp/v2/posts
Header: Authorization : Bearer <token>

您运行有从 fetch API 调用中用 undefined 替换状态属性的风险。

试试这个。将有助于捕获未定义的内容并改为放置后备内容。

this.setState({
    date,
    title: title || {rendered: false}, 
    content: content || {rendered: false}
});

Answer 2

此代码解决了问题：

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      posts: []
    };
  }
  componentDidMount () {
    return fetch('https://example.com/wp-json/wp/v2/posts?per_page=100')
    .then((response) => response.json())
    .then(posts => {
      this.setState({
        posts: posts,
      });
    })
  }
  render() {
    return (
      <div>
        <ul>
          {
            this.state.posts.map(item => (
              <div key={item.id}>
              <h1>
                  {item.title.rendered}
              </h1>
              <p dangerouslySetInnerHTML={{ __html: item.content.rendered }}>
              </p>
              </div>
            ))
          }
        </ul>
      </div>
    )
  }
}

export default App;

使用 React 从 WP REST API 获取 'title'

Fetching 'title' from WP REST API with React

reactjs

fetch

undefined

typeerror

wordpress-rest-api