Question

我有一个古腾堡（Gutenberg）块，用于通过编辑屏幕选择前端的渲染。

我的课是：

class MySelectPosts extends Component {
  //Method for setting the initial state
  static getInitialState(selectedPost) {
    return {
      posts: [],
      selectedPost: selectedPost,
      post: {}
    };
  }

  constructor() {
    super(...arguments);
    this.state = this.constructor.getInitialState(
      this.props.attributes.selectedPost
    );
    //Binding
    this.getOptions = this.getOptions.bind(this);
    //Load the posts
    this.getOptions();
  }

  getOptions() {
    return new wp.api.collections.Posts().fetch().then(posts => {
      if (posts && 0 !== this.state.selectedPost) {
        //If we have a selected post, find that post and return it
        const post = posts.find(item => {
          return item.id == this.state.selectedPost;
        });
        this.setState({ post, posts });
      } else {
        this.setState({ posts });
      }
    });
  }

  render() {
    //Options to hold all the loaded posts
    let options = [{ value: 0, label: __("Select a post") }];
    let output = __("Loading Posts");
    if (this.state.posts.length > 0) {
      const loading = __("We have %d posts. Choose one.");
      output = loading.replace("%d", this.state.posts.length);
      this.state.posts.forEach(post => {
        options.push({ value: post.id, label: post.title.rendered });
      });
    } else {
      output = __("No posts found. Please create some first");
    }
    return [
      //If we are focused on this block, create the inspector controls
      !!this.props.isSelected && (
        <InspectorControls>
          <SelectControl
            multiple
            value={this.props.attributes.selectedPost}
            label={__("Select a post")}
            options={options}
          />
        </InspectorControls>
      ),
      "Load post placeholder"
    ];
  }
}

export default MySelectPosts;

该块本身可以呈现到屏幕上，并且当未选中该块时，它将返回“ Load post placeholder”。

但是，当我选择该块时，它会返回该块无法渲染的信息，并且在控制台中显示：

不变违规：最小化React错误＃130；访问 https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= 以获得完整消息或使用非最小化的dev环境获得完整消息错误和其他有用的警告。

哪个错误是：

元素类型无效：预期为字符串（对于内置组件）或类/函数（用于复合组件），但得到：未定义。

它没有具体说明错误的出处，但我将其范围缩小到<InspectorControls>块，因为如果我用一个字符串替换该块，它将呈现该字符串（它也呈现'Load在该字符串后紧接占位符。

我正在这样导入文件开头的控件：

const { __ } = wp.i18n;
const { registerBlockType, InspectorControls } = wp.blocks;
const { SelectControl, PanelBody } = wp.components;
const { Component } = wp.element;

有人可以阐明这一点吗？大多数答案（据我所见）都表明该类的import不正确，但是我在其他Gutenberg块上使用了import {InspectorControls} = wp.blocks，它们工作得很好。

Answer 1

这个解决方案实际上非常简单，我通过This Stack Exchange Post找到了 { InspectorControls }已移至新的命名空间wp.editor。因此，当我在上面的class中调用它时，它显然返回了一个错误，因为React无法读取该组件，因为它不存在。

古腾堡<InspectorControls />返回ReactJS'元素类型无效'

1 个答案: