rest api - Cannot DIsplay a Snackbar Notice on Button Click - Notice is undefined

admin管理员组

文章数量:1287633

I am trying to use withSelect and withDispatch to display an admin notice when "save" button is clicked. I am using the following code from this repo but it throws an error: "notices is undefined". Here is the code I am using:

import { Icon, Button, SnackbarList } from '@wordpress/components';
import { dispatch, withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
// Display and Dispatch the notice
const NewNotices = ({ notices, removeNotice }) => {
    
    //Uncaught TypeError: notices is undefined
    const snackbarNotices = notices.filter((notice) => notice.type === 'snackbar');

    return (
        <>
            <SnackbarList
                className="cwg-admin-notices"
                notices={snackbarNotices}
                onRemove={removeNotice}
            />
        </>
    );
}

export default compose([
    withSelect((select) => ({
        notices: select('core/notices').getNotices(),
    })),
    withDispatch((dispatch) => ({
        removeNotice: dispatch('core/notices').removeNotice,
    })),
])(NewNotices);

<>
//Create the notice on btn click
<Button
   isPrimary
   onClick={() =>
   {
   settings.save();
   dispatch('core/notices')
   .createNotice(
   'success',
   __('Settings Saved', 'slug'),
   {
   type: 'snackbar',
   isDismissible: true,
   icon: 
   <Icon icon="smiley" />
   }
   );
   }}
   >
   {__('Save', 'slug')}
</Button>
<NewNotices />
</>

I am trying to use withSelect and withDispatch to display an admin notice when "save" button is clicked. I am using the following code from this repo but it throws an error: "notices is undefined". Here is the code I am using:

import { Icon, Button, SnackbarList } from '@wordpress/components';
import { dispatch, withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
// Display and Dispatch the notice
const NewNotices = ({ notices, removeNotice }) => {
    
    //Uncaught TypeError: notices is undefined
    const snackbarNotices = notices.filter((notice) => notice.type === 'snackbar');

    return (
        <>
            <SnackbarList
                className="cwg-admin-notices"
                notices={snackbarNotices}
                onRemove={removeNotice}
            />
        </>
    );
}

export default compose([
    withSelect((select) => ({
        notices: select('core/notices').getNotices(),
    })),
    withDispatch((dispatch) => ({
        removeNotice: dispatch('core/notices').removeNotice,
    })),
])(NewNotices);

<>
//Create the notice on btn click
<Button
   isPrimary
   onClick={() =>
   {
   settings.save();
   dispatch('core/notices')
   .createNotice(
   'success',
   __('Settings Saved', 'slug'),
   {
   type: 'snackbar',
   isDismissible: true,
   icon: 
   <Icon icon="smiley" />
   }
   );
   }}
   >
   {__('Save', 'slug')}
</Button>
<NewNotices />
</>

• rest-api
• notices

Share Improve this question edited Sep 26, 2021 at 21:17 Badan asked Sep 26, 2021 at 20:34 BadanBadan 22511 silver badge77 bronze badges 2

• Which line is throwing the error? – Jacob Peattie Commented Sep 27, 2021 at 4:57
• It is the line where I am evaluating const snackbarNotices. Apparently, notices param in the <NewNotices/> component is undefined (when i try to console.log it, it is undefined.) – Badan Commented Sep 27, 2021 at 6:47

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I figured it out. The component was not rerendering, when clicking the "Save" button. I included the compose component in the render method and all is working good now:

const Notices = ({ notices, removeNotice }) => {

    const snackbarNotices = notices ? notices.filter((notice) => notice.type === 'snackbar') : [];
    return (
        <>
            <SnackbarList
                className="cwg-admin-notices"
                notices={snackbarNotices}
                onRemove={removeNotice}
            />
        </>
    );
}

const AppNotices = compose(
    withSelect((select) => ({
        notices: select('core/notices').getNotices(),
    })),
    withDispatch((dispatch) => ({
        removeNotice: dispatch('core/notices').removeNotice,
    })),
)(Notices);

--

<Button
   isPrimary
   onClick={() =>
       {
       settings.save();
       dispatch('core/notices')
       .createNotice(
           'success',
           __('Settings Saved', 'slug'),
           {
           type: 'snackbar',
           isDismissible: true,
           icon: <Icon icon="smiley" />
           }
       );
   }}
   >
   {__('Save', 'slug')}
</Button>
<AppNotices/>

本文标签： rest apiCannot DIsplay a Snackbar Notice on Button ClickNotice is undefined