在卸载的组件上找不到节点(react-sortable-hoc)

Question

有一个小的gutenberg块，但我有错误。

在未装入的组件上找不到节点未定义不是对象(计算“”this.refscollection.indexOf“”)

当前的wp版本使用React 16.13.1

我该如何解决这个问题呢？谢谢!

    import {SortableContainer, SortableElement} from 'react-sortable-hoc';
    
    registerBlockType('ay/sortable', {
        title: __('Sortable'),        
        attributes: {
            items: {
                type: 'array',
                default: [
                    'Item 1',
                    'Item 2',
                    'Item 3',                    
                ],
            },
        },
    
        edit(props) {
            const {
                attributes: {items},
                setAttributes,
            } = props;
    
            const SortableItem = SortableElement(({value}) => <li>{value}</li>);
    
            const SortableList = SortableContainer(({items}) => {
                return (
                    <ul>
                        {items.map((value, index) => (
                            <SortableItem
                                key={`item-${value}`}
                                index={index}
                                value={value}
                            />
                        ))}
                    </ul>
                );
            });
    
            const onSortEnd = ({oldIndex, newIndex}) => {
                setAttributes(({items}) => ({
                    items: arrayMove(items, oldIndex, newIndex),
                }));
            };
    
            return (
                <div>
                    <SortableList items={items} onSortEnd={onSortEnd} />
                </div>
            );
        },
    
        save(props) {
            return null;
        },
    });

Answer 1

在您提供的代码中，缺少两个关键导入才能使您的块工作，添加：

...
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
...

还要检查您的package.json是否将react-sortable-hoc列为依赖项：

...
"devDependencies": {
    ...
    react-sortable-hoc": "^2.0.0"
},

在添加了缺少的导入并确保依赖项存在/安装之后，您的代码块应该会编译无误。我测试了您的代码，edit()函数的所有其他部分都没有问题，并且输出是一个可排序的列表。