admin管理员组文章数量:1327945
I'm creating a block. I want my block to be able to output posts that can be "filtered". It should be possible to choose from which category the posts should be displayed. I have gotten so far that I have a function that gives me the categories and you can also select them. Then the values are written in a shortcode. But my problem is, I don't see the select field at first. If I then click somewhere within the editor and then click on my block again, I get to see the SelectControl. If I reload the page and click on my block too quickly, I also get an error that the foreach is empty. How can I make sure that my foreach is already filled before loading my block?
My edit.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}
/>
I'm creating a block. I want my block to be able to output posts that can be "filtered". It should be possible to choose from which category the posts should be displayed. I have gotten so far that I have a function that gives me the categories and you can also select them. Then the values are written in a shortcode. But my problem is, I don't see the select field at first. If I then click somewhere within the editor and then click on my block again, I get to see the SelectControl. If I reload the page and click on my block too quickly, I also get an error that the foreach is empty. How can I make sure that my foreach is already filled before loading my block?
My edit.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}
/>
Share
Improve this question
asked Jul 31, 2020 at 7:55
180690180690
1812 silver badges9 bronze badges
1 Answer
Reset to default 1The problem is that calling wp.data.select
triggers a fetch and the data takes some time to be available. Until that happens the value returned is an empty array.
My suggestion here is to use wp.data.useSelect
, which is a React hook made specifically for this, so the component re-renders when there is a change in the data:
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}
/>
);
};
This will also have the "issue" that the value on the first call of select('core').getEntityRecords('taxonomy', 'category')
is empty. So you might want to consider it and return something different in the component if categories.length === 0
.
If you really need to prevent this from happening, I guess you could call wp.data.select('core').getEntityRecords('taxonomy', 'category')
in your script, close to the top, so when it is called by the component for the first time the data is already in the store.
本文标签: Gutenberg block get categories in SelectControl
版权声明:本文标题:Gutenberg block get categories in SelectControl 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742216970a2434747.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论