WordPress с React: сохранение и использование данных, собранных с помощью fetch

Question

Я пытаюсь сделать что-то простое, с надеждой, что-то простое с реакцией, то есть доступ к конечной точке, созданной моим локально установленным веб-сайтом WordPress, чтобы я мог использовать эти данные и отображать их так, как мне нравится.

Iя пытаюсь установить состояние для данных, но, хотя оно может быть напечатано на консоли в функции 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 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>
    );
}