我的插件中有这个功能，一切都很好：
edit: withAPIData( props => {
return {
roles: \'/matt-watson/secure-blocks/v1/user-roles/\'
};
} )( props => {
。。。。
然而，此处的指南表明，这将不再得到支持：https://github.com/WordPress/gutenberg/issues/7390#issuecomment-398667802
因此，我成功地将其应用到解决方案中：
const DEFAULT_STATE = {
userRoles: {},
};
const actions = {
setUserRoles( userRoles ) {
return {
type: \'SET_USER_ROLES\',
userRoles,
};
},
fetchFromAPI( path ) {
return {
type: \'FETCH_FROM_API\',
path,
};
},
};
registerStore( \'matt-watson/secure-block\', {
reducer( state = DEFAULT_STATE, action ) {
switch ( action.type ) {
case \'SET_USER_ROLES\':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
getUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
FETCH_FROM_API( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* getUserRoles( state ) {
const path = \'/matt-watson/secure-blocks/v1/user-roles/\';
const userRoles = yield actions.fetchFromAPI( path );
return actions.setUserRoles( userRoles );
},
}
,
} );
。。。。
edit: withSelect( ( select ) => {
return {
roles: select(\'matt-watson/secure-block\').getUserRoles(),
};
} )( props => {
。。。。
现在的问题是“控制”部分从不开火。文档中说这是一个选择加入组件，我需要通过use 命令：https://github.com/WordPress/gutenberg/tree/master/packages/data#controls
当我尝试这个的时候，use 未定义。
所以我的问题是。像withAPIData 我以一种非常快速和简单的方式完成了我所需要的一切，是否有一种替代的“插入式”代码我可以使用，或者我是否需要继续使用我正在注册的商店？如果是，我做错了什么？
感谢您的帮助。非常感谢。
最合适的回答,由SO网友:Matt Watson 整理而成
值得注意的是，上面的答案已经过时了。数据存储现在应如下所示：
const actions = {
setUserRoles( userRoles ) {
return {
type: \'SET_USER_ROLES\',
userRoles,
};
},
receiveUserRoles( path ) {
return {
type: \'RECEIVE_USER_ROLES\',
path,
};
},
};
const store = registerStore( \'matt-watson/secure-block\', {
reducer( state = { userRoles: {} }, action ) {
switch ( action.type ) {
case \'SET_USER_ROLES\':
return {
...state,
userRoles: action.userRoles,
};
}
return state;
},
actions,
selectors: {
receiveUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
controls: {
RECEIVE_USER_ROLES( action ) {
return apiFetch( { path: action.path } );
},
},
resolvers: {
* receiveUserRoles( state ) {
const userRoles = yield actions.receiveUserRoles( \'/matt-watson/secure-blocks/v1/user-roles/\' );
return actions.setUserRoles( userRoles );
},
},
} );
我已经更新了教程：
https://mwatson.co.uk/working-with-gutenberg-and-the-wordpress-rest-api/
SO网友:Matt Watson
我已经破解了！
const actions = {
setUserRoles( userRoles ) {
return {
type: \'SET_USER_ROLES\',
userRoles,
};
},
receiveUserRoles( path ) {
return {
type: \'RECEIVE_USER_ROLES\',
path,
};
},
};
const store = registerStore( \'matt-watson/secure-block\', {
reducer( state = { userRoles: {} }, action ) {
switch ( action.type ) {
case \'SET_USER_ROLES\':
return {
...state,
userRoles: action.userRoles,
};
case \'RECEIVE_USER_ROLES\':
return action.userRoles;
}
return state;
},
actions,
selectors: {
receiveUserRoles( state ) {
const { userRoles } = state;
return userRoles;
},
},
resolvers: {
* receiveUserRoles( state ) {
const userRoles = apiFetch( { path: \'/matt-watson/secure-blocks/v1/user-roles/\' } )
.then( userRoles => {
return actions.setUserRoles( userRoles );
} )
yield userRoles;
},
},
} );
这将设置userRoles的状态，并在解析后返回userRoles。
然后，您可以这样访问：
。。。。
edit: withSelect( ( select ) => {
return {
roles: select(\'matt-watson/secure-block\').receiveUserRoles(),
};
} )( props => {
。。。。
