web-dev-qa-db-fra.com

Impossible de lire la propriété 'xxx.xxx' non définie

Mise à jour de meteor (de 1.4 à 1.7) et react (de 15.3.2 à 16.8.6). Utilisation de Meteor Atmosphere.

À une partie du code permettant de traiter une instruction de suppression, la console a l'erreur familière mais inutile suivante:

Uncaught TypeError: Cannot read property 'displayConfirmation' of undefined
    at remove (ticket.js:48)
    at onClick (list.jsx:180)
    at HTMLUnknownElement.callCallback (modules.js?hash=199fa8ade393a4d3c92b5b590836441c4936d1d6:54371)
    at Object.invokeGuardedCallbackDev (modules.js?hash=199fa8ade393a4d3c92b5b590836441c4936d1d6:54420)
    at invokeGuardedCallback (modules.js?hash=199fa8ade393a4d3c92b5b590836441c4936d1d6:54475)
    at invokeGuardedCallbackAndCatchFirstError (modules.js?hash=199fa8ade393a4d3c92b5b590836441c4936d1d6:54489)
    at executeDispatch (modules.js?hash=199fa8ade393a4d3c92b5b590836441c4936d1d6:54572)
    at executeDispatchesInOrder (modules.js?hash=199fa8ade393a4d3c92b5b590836441c4936d1d6:54597)
    at executeDispatchesAndRelease (modules.js?hash=199fa8ade393a4d3c92b5b590836441c4936d1d6:57461)
    at executeDispatchesAndReleaseTopLevel (modules.js?hash=199fa8ade393a4d3c92b5b590836441c4936d1d6:57470)

Attente: Pop up d'une boîte de dialogue demandant une confirmation avant la suppression.

Voici une partie des codes:

composants/list.jsx

...
onClick={() => actions.delete && remove()}><img src={require('/crm/images/icon_delete.png')}/> Delete all selected</span>
...

actions/ticket.js

import * as React from 'react';

import { Push, goBack } from 'react-router-redux';
import { reset, SubmissionError } from 'redux-form';

import { notify, confirm } from '../../core/actions';

import {Tickets} from '../../../../lib/collections';

import {
  SELECT_TICKETS, UNSELECT_TICKETS, CHANGE_TICKETS_PAGE, SORT_TICKETS,

  LOAD_TICKET, UNLOAD_TICKET,
  LOAD_ACTIVITIES, UNLOAD_ACTIVITIES,

  CHANGE_CATEGORY, CHANGE_STATUS, CHANGE_DATE,
} from './actionTypes';

export default {
  remove(context) {
    const {Meteor, Store} = context;
    let tickets = Store.getState().tickets.list.selectedTickets;

    confirm.displayConfirmation(context, {        // <-- It can't seem to recognize this
      title: 'Removing Tickets',
      message: "<p>Are you sure you want to delete below tickets?<ul>{tickets.map((ticket, i) => <li key={'msg-' + i}>{ticket.ticketNo}</li>)}</ul></p>",
      callback: () => {
        Meteor.call('tickets.delete', tickets.map(ticket => ticket._id), (err) => {
          if (err) {
            return;
          }

          notify.sendNotify(context, `${tickets.map(ticket => ticket.ticketNo).join(', ')} ${tickets.length > 1 ? 'have' : 'has'} been deleted.`);
          unselect(context);
        });

      }
    });
  },
};

../../ core/actions/index.js

import notify from './notify';
import confirm from './confirm';

export default {
  notify,
  confirm
};

../../ core/actions/confirm.js

let dismissConfirmation = ({Store}) => {
  Store.dispatch({
    type: DISMISS_CONFIRMATION
  });
};

export default {
  displayConfirmation({Store}, {title, message, callback}) {
    Store.dispatch({
      type: DISPLAY_CONFIRMATION,
      title,
      message,
      callback
    });
  },

  dismissConfirmation,

  confirm(context) {
    let {Store} = context;

    Store.getState().confirm.callback();
    dismissConfirmation(context);
  }
};

Toute aide appréciée surtout!

- MODIFIER -

J'ai essayé de changer confirm.js en:

../../ core/actions/confirm.js

export const dismissConfirmation = ({Store}) => {
  Store.dispatch({
    type: DISMISS_CONFIRMATION
  });
};

export const displayConfirmation = ({Store}, {title, message, callback}) => {
  Store.dispatch({
    type: DISPLAY_CONFIRMATION,
    title,
    message,
    callback
  });
};

export const confirm = (context) => {
  let {Store} = context;

  Store.getState().confirm.callback();
  dismissConfirmation(context);
};

Mais toujours la même erreur indéfinie.

Si j'ai essayé de changer confirm.displayConfirmation to displayConfirmation at actions/ticket.js, obtiendra alors l'erreur suivante:

Uncaught TypeError: displayConfirmation is not a function
react-nativemeteorecmascript-6
1
Leslie Leng

Comme suggéré par @mzparacha, voici les derniers changements.

../../ core/actions/confirm.js

export const dismissConfirmation = ({Store}) => {
  Store.dispatch({
    type: DISMISS_CONFIRMATION
  });
};

export const displayConfirmation = ({Store}, {title, message, callback}) => {
  Store.dispatch({
    type: DISPLAY_CONFIRMATION,
    title,
    message,
    callback
  });
};

export const confirm = (context) => {
  let {Store} = context;

  Store.getState().confirm.callback();
  dismissConfirmation(context);
};

Cependant, sur la partie importation, faites-le comme ci-dessous à la place:

actions/ticket.js

import * as confirm from '../../core/actions/confirm';
...

Et le reste reste. Fonctionne comme du charme. Merci @mzparacha

0
Leslie Leng