WordPress具有React:保存和使用以获取收集的数据

Question

我正在尝试使用React做一个希望的基本操作，这是我本地安装的WordPress网站创建的端点，以便我可以使用该数据并以我喜欢的方式渲染数据。

我试图将状态设置为数据，但可以将其打印到componentWillMount()函数中的控制台，状态posts保持空。我可以console.log来自该函数的数据，但不能设置状态，然后在render函数中使用它。我的代码如下：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Widget extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            posts: []
        };
    }

    componentWillMount() {
      const theUrl = "http://localhost:8888/test-site/wp-json/wp/v2/posts";
      fetch(theUrl)
      .then(response => response.json())
      .then(response =>
        this.setState({
          posts: response
        })
      )
    }

    render() {
      console.log('render posts: ' + this.state.posts);
        return (
            <div>
              <h1>React Widget</h1>
                <p>posts:</p>
            </div>
        );
    }
}
Widget.propTypes = {
  wpObject: PropTypes.object
};

控制台：

JQMIGRATE: Migrate is installed, version 1.4.1
react-dom.development.js:21258 Download the React DevTools for a better development experience: https://.me/react-devtools
react-dom.development.js:21258 Download the React DevTools for a better development experience: https://.me/react-devtools
Widget.jsx:28 render posts: 
jquery.loader.js:2 running on http://localhost:8888/test-site/
Widget.jsx:28 render posts: [object Object],[object Object],[object Object],[object Object]

控制台中的第二行到最后一行，旁边有一个倒塌箭头，我可以看到这些实际上是所有正确信息的帖子。为什么我不能将状态设置为fetch()返回的数据？

Answer 1

React具有特殊功能setState()来设置组件状态(对于类组件(。因此，而不是直接分配

this.state = {
    value: 'foo2',
    posts: data.value,
};

使用

this.setState({
    value: 'foo2',
    posts: data.value,
})

。

这将导致以下代码。另外，您的获取属于componentDidMount()功能(我在初稿中错过了它(。

export default class Widget extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            posts: []
        };
    }
    componentDidMount() {
        fetch("http://localhost:8888/test-site/wp-json/wp/v2/posts")
            .then(data => data.json())
            .then(data => this.setState({posts: data.value}))
    }

    render() {
        return (
            <div>
                <p>value: {this.state.posts}</p>
            </div>
        );
    }
}

在此特殊示例中，您可能还需要使用具有useState()和useEffect钩的功能组件：

export default function Widget() {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        fetch("http://localhost:8888/test-site/wp-json/wp/v2/posts")
            .then(data => data.json())
            .then(data => setPosts(data.value))
    });

    return (
        <div>
            <p>value: {posts}</p>
        </div>
    );
}