如何在 WordPress Gutenberg 中使用 react-sortable-hoc答案

【问题标题】：How to use react-sortable-hoc with WordPress Gutenberg如何在 WordPress Gutenberg 中使用 react-sortable-hoc
【发布时间】：2019-04-23 22:19:41
【问题描述】：

Gutenberg 仍然很新，但我仍然希望有人遇到此问题并找到解决方案。

我使用 create-guten-block 来样板化项目并创建了一个选项卡式内容块。我正在使用带有 Gutenberg 的 react-sortable-hoc 来交换项目列表中的项目。我尝试了几种解决方案，但没有得到答案。我遇到的问题是我在控制台中收到此错误，它无法读取未定义的地图。我认为未定义的是项目对象。：

react-dom.min.fa9ca8c8.js:117 TypeError: Cannot read property 'map' of undefined
    at eval (block.js?921d:73)
    at Td (react-dom.min.fa9ca8c8.js:82)
    at hi (react-dom.min.fa9ca8c8.js:102)
    at Qg (react-dom.min.fa9ca8c8.js:144)
    at Rg (react-dom.min.fa9ca8c8.js:145)
    at Sc (react-dom.min.fa9ca8c8.js:158)
    at Z (react-dom.min.fa9ca8c8.js:156)
    at Kc (react-dom.min.fa9ca8c8.js:155)
    at ya (react-dom.min.fa9ca8c8.js:153)
    at Object.enqueueSetState (react-dom.min.fa9ca8c8.js:202)

请查看我在 WordPress Gutenberg 中使用的以下代码。我想我错过了一些我不知道的东西。任何帮助都将不胜感激。

const { __ } = wp.i18n; // Import __() from wp.i18n
import {
    SortableContainer,
    SortableElement,
    SortableHandle,
    arrayMove
} from 'react-sortable-hoc';
const { registerBlockType } = wp.blocks;

registerBlockType( 'cgb/block-tabbed-content', {
    title: __( 'tabbed-content - CGB Block' ), // Block title.
    icon: 'shield',
    category: 'common',
    keywords: 'tabbed-content',

  attributes : {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  },

edit: function( props ) {

    const { attributes, setAttributes } = props;

    const SortableItem = SortableElement(({value}) => <li>{value}</li>);

    const SortableList = SortableContainer(({items}) => {
      return (
        <ul>
          {items.map((value, index) => (
            <SortableItem key={`item-${index}`} index={index} value={value}/>
          ))}
        </ul>
      );
    });

    const onSortEnd = ({oldIndex, newIndex}) => {
      setAttributes(({items}) => ({
        items: arrayMove(items, oldIndex, newIndex),
      }));
    };

    return (
        <div className={ props.className }>
            <SortableList items={attributes.items} onSortEnd={onSortEnd} />
        </div>
        );
    },

【问题讨论】：

标签： wordpress reactjs wordpress-gutenberg

【解决方案1】：

您需要从attributes 对象中引用items 属性。看看这是否有帮助。

更新这个。

{items.map((value, index) => (
     <SortableItem key={`item-${index}`} index={index} value={value}/>
))}

到这个。

{attributes.items.map((value, index) => (
     <SortableItem key={`item-${index}`} index={index} value={value}/>
))}

【讨论】：