web-dev-qa-db-ja.com

未定義のプロパティ 'xxx.xxx'を読み取れません

meteor（1.4から1.7）およびreact（15.3.2から16.8.6へ）のアップグレード。流星の雰囲気を使用しています。

削除命令を処理するためのコードの一部で、コンソールには次のよく知られているが見当がつかないエラーがあります。

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)

期待：削除する前に確認を求めるダイアログボックスのポップアップ。

以下はコードの一部です：

components/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);
  }
};

どんな助けも大歓迎です！

-編集-

confirm.jsを次のように変更しようとしました：

../../ 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);
};

しかし、それでも同じ未定義のエラーが発生します。

変更しようとした場合confirm.displayConfirmation to displayConfirmation at actions/ticket.jsの場合、次のエラーが発生します。

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

@mzparachaによって提案されたように、以下は最終的な変更です。

../../ 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);
};

ただし、インポート部分では、代わりに以下のようにしました。

actions/ticket.js

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

そして残りは残ります。魅力のように機能します。ありがとう@mzparacha

0
Leslie Leng