Question

我正在尝试做一个有希望的基本操作，它是访问由本地安装的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>
    );
}

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

1 个答案: