React新手求助：如何在WordPress前端save.js中显示this.state值？

核心问题 #

WordPress区块的save函数是纯函数，它的作用是生成静态HTML并存储到数据库，运行时没有组件实例，因此无法访问this.state——这就是你报错的原因。区块中需要在前端显示的数据，必须通过区块的attributes（属性）来传递，而不是依赖Edit组件的内部state。

具体解决方案 #

1. 注册区块时定义attributes

在index.js的registerBlockType配置中，添加attributes字段，把需要持久化的test字段定义进去：

registerBlockType('your-block-namespace/your-block-name', {
  // 其他配置（title, icon等）
  attributes: {
    test: {
      type: 'string',
      default: 'lorem ipsum' // 对应你原来state里的默认值
    }
  },
  edit: Edit,
  save: Save
});

2. 修改Edit组件，使用attributes替代state中的test

把Edit组件里state的test移除，改为从props的attributes中获取。如果需要修改这个值，使用props.setAttributes来更新（而不是setState）：

// edit.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
            // 移除state里的test
        }
    }
 
    componentDidMount() {
        this.runApiFetch();
    }
 
    runApiFetch() {
        apiFetch({ path: '/wp/v2/posts' })
            .then(data => {
                this.setState({
                    list: data,
                    loading: false
                })
        })
    }
 
    render() {
        const { attributes } = this.props;
        return(
            <div>
                {/* 如果需要在编辑器里显示test，可以直接用attributes.test */}
                <div>{attributes.test}</div>
                {this.state.loading ? (
                    <Spinner />
                ) : (
                    <>
                        {this.state.list.map(post => {
                            return (
                                <div>
                                    { post.title.rendered }
                                </div>  
                            )
                        }) }
                    </>
                )}
            </div>
        );
    }
}
export default Edit;

3. 修改Save函数，从attributes获取数据

save函数会接收attributes作为参数，直接从中提取test即可：

// index.js 中的save函数修改后
save({ attributes }) {
    const { test } = attributes;

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

补充说明 #

• 区块的attributes是Edit和Save之间唯一的数据传递通道，所有需要在前端显示的动态/静态数据都要通过它来传递。
• Edit组件的state只用来管理编辑器内的临时状态（比如加载状态、未提交的临时输入等），不需要持久化到前端的数据可以放在state里。

内容的提问来源于stack exchange，提问作者pennylane