如何在save.js中显示this.state值？

Question

我是 React 新手，想问一下如何在我的 WordPress 前端显示

this.state

值？ （保存.js）

编辑.js：

import apiFetch from '@wordpress/api-fetch';

const { Component } = wp.element;
const { Spinner } = wp.components;
 
class Edit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            loading: true,
            test: 'lorem ipsum'
        }
    }
 
    componentDidMount() {
        this.runApiFetch();
    }
 
    runApiFetch() {
        apiFetch({ path: '/wp/v2/posts' })
            .then(data => {
                this.setState({
                    list: data,
                    loading: false
                })
        })
    }
 
    render() {
        return(
            <div>
                {this.state.loading ? (
                    <Spinner />
                ) : (
                    <>
                        {this.state.list.map(post => {
                            return (
                                <div>
                                    { post.title.rendered }
                                </div>  
                            )
                        }) }
                    </>
                )}
            </div>
        );
    }
}
export default Edit;

保存在我的index.js中：

save() {
    const { test } = this.state;

    return (
        <>  
            <div>{test}</ div>
        </>
    )
}

我收到此错误：

如何在 WordPress 前端显示 this.state 值？一切都在编辑器视图中进行。

Answer 1

要在 React 组件 Save.js 中显示 this.state 的值，需要确保 this.state 在 Save.js 范围内可访问。