SelectControl中的Gutenberg块Get类别

时间：2020-07-31 作者：180690

我正在创建一个块。我希望我的区块能够输出可以是；已筛选；。应该可以选择显示哪些类别的帖子。到目前为止，我有一个函数可以给我分类，你也可以选择它们。然后是值​​用短代码编写。但我的问题是，我一开始没有看到select字段。如果单击编辑器中的某个位置，然后再次单击我的块，我将看到SelectControl。如果我重新加载页面并过快地单击我的块，我还会得到一个错误，即foreach是空的。在加载块之前，如何确保我的foreach已填充？

我的编辑。js公司

function getCategories() {
    const options = [];
    const postCategory = wp.data.select(\'core\').getEntityRecords(\'taxonomy\', \'category\');
    postCategory.forEach((cat) => {
        options.push({ value: cat.id, label: cat.name });
    });
    return options;
}
。。。

<SelectControl
    multiple
    label={__(\'Cat\')}
    options={getCategories()}
    onChange={onChangeCategoriesField}
    value={categories}
/>

1 个回复
SO网友:Alvaro

问题是wp.data.select 触发提取，数据需要一些时间才能可用。在此之前，返回的值是一个空数组。

我的建议是wp.data.useSelect, 这是一个专门为此制作的React挂钩，因此当数据发生更改时，组件将重新渲染：

const MyComponent = () => {

    const categories = useSelect(select =>
        select(\'core\').getEntityRecords(\'taxonomy\', \'category\')
    );

    const [categories_selected, setCategoriesSelected] = useState([]);

    return (
        <SelectControl
            multiple
            label={__(\'Cat\')}
            options={categories.map(({id, name}) => ({label: name, value: id}))}
            onChange={(selected) => {
                // I haven\'t tested this code so I\'m not sure what onChange returns.
                // But assuming it returns an array of selected values:
                setCategoriesSelected(selected)
            }}
            value={categories_selected}
        />
    );
};
这也将有；“发布”；第一次调用select(\'core\').getEntityRecords(\'taxonomy\', \'category\') 为空。因此，如果categories.length === 0.

如果你真的需要防止这种情况发生，我想你可以打电话wp.data.select(\'core\').getEntityRecords(\'taxonomy\', \'category\') 在脚本中，靠近顶部，因此当组件第一次调用它时，数据已经在存储中。

标签： block-editor   小码农  

相关推荐