Гутенбергвозвращает ReactJS «Тип элемента неверен» - PullRequest
Новая
       72

Гутенбергвозвращает ReactJS «Тип элемента неверен»

0 голосов
/ 27 сентября 2019

У меня есть блок Гутенберга, который я использую для выбора сообщений через экран редактирования рендера на веб-интерфейсе.

Мой класс: 

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;

Сам блок можетотображается на экране, и когда он не выбран, он возвращает «Загрузить заполнитель поста».

Однако, когда я выбираю блок, он возвращает, что блок не может быть отображен, и в консоли я получаю:

Инвариантное нарушение: ошибка Minified React # 130;посетите https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= для полного сообщения или используйте неминифицированную среду разработки для полных ошибок и дополнительных полезных предупреждений.

В котором говорится, что ошибка:

Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined.

В ней конкретно не указано, где находится ошибка, но я сузил его до блока <InspectorControls>, потому что, если я заменю этот блок строкой, он будет отображать строку (он также отображает 'Load post placeholder' сразу после строки.

Iимпортирую элементы управления в начале файла следующим образом: 

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

Может кто-нибудь пролить свет на это? Большинство ответов (насколько я вижу) предлагают неверный import класса,однако я использовал import {InspectorControls} = wp.blocks на других блоках Гутенберга, и они отлично работали.

1 Ответ

0 голосов
/ 27 сентября 2019

Решение этого вопроса было на самом деле очень простым, и я нашел его через Это сообщение о стеке { InspectorControls } было перемещено в новое пространство имен, wp.editor.Поэтому, когда я назвал его в class выше, он, очевидно, возвратил ошибку, потому что React не смог прочитать Компонент, так как он не существовал.

...