WordPress with React：保存和使用通过fetch收集的数据

Question

I am trying to do a hopefully basic thing with react, which is access an endpoint created by my locally installed WordPress website so that I can use that data and render it in a way I like.

I am trying to set the state to the data but alsough it can be printed to the console in the componentWillMount() function, the state posts remains empty. I can console.log the data from that function but I cannot set the state and then use it in the render function. My code is below:

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
};

Console:

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]

the second to last line in the console has a collapse arrow next to it and I can see that those are in fact the posts with all of their correct information. Why can I not set the state to the data being returned by fetch() ?

Answer 1

React has a special function setState() to set a components state (for class components). So instead of a direct assignment

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

use

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

.

This results in the following code. Also, your fetch belongs into the componentDidMount() function (I missed that in my first draft).

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>
        );
    }
}

For this special example, you might also want to use functional components with a useState() and a useEffect hook:

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>
    );
}