Electron не может прочитать свойство 'path' из неопределенных видео, которые я загрузил

Question

Я пытаюсь преобразовать видео, которое я успешно загрузил, в проект Electron with React. У меня не было проблем с добавлением видео, но когда я пытаюсь преобразовать видео в другой тип файла, я получаю сообщение об ошибке ниже:

Uncaught Exception: TypeError: Невозможно прочитать свойство 'path' изне определено в EventEmitter.ipcMain.on (/Users/danale/Projects/ElectronCode/boilerplates/convert/index.js:37:32) в emitTwo (events.js: 106: 13) в EventEmitter.emit (events.js: 191: 7) на веб-сайте. (/Users/danale/Projects/ElectronCode/boilerplates/convert/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/api/web-contents.js:247:37) в emitTwo (события.js: 106: 13) at WebContents.emit (events.js: 191: 7)

Ссылка на этот код ниже:

ipcMain.on("conversion:start", (event, videos) => {
  const video = videos[0];

  const outputDirectory = video.path.split(video.name)[0];
  const outputName = video.name.split(".")[0];
  const outputPath = `${outputDirectory}${outputName}.${video.format}`;
  console.log(outputPath);
  // ffmpeg(video.path).output();
});

но я ничего не вижуне так с кодом. Почему videos не определено сейчас? Я смог успешно добавить их.

Вот мой создатель действий:

export const convertVideos = videos => (dispatch, getState) => {
  ipcRenderer.send("conversion:start", videos);
};

Это мой редуктор:

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case VIDEO_COMPLETE:
      return { ...state, [action.payload.path]: { ...action.payload, complete: true } };
    case VIDEO_PROGRESS:
      return { ...state, [action.payload.path]: action.payload };
    case ADD_VIDEOS:
      return { ...state, ..._.mapKeys(action.payload, 'path')}
    case ADD_VIDEO:
      return { ...state, [action.payload.path]: action.payload };
    case REMOVE_VIDEO:
      return _.omit(state, action.payload.path);
    case REMOVE_ALL_VIDEOS:
      return INITIAL_STATE
    default:
      return state;
  }
}

convertVideos вызываетсяот src/components/ConvertPanel.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router'
import * as actions from '../actions';

class ConvertPanel extends Component {

  onCancelPressed = () => {
    this.props.removeAllVideos();
    this.props.history.push('/')
  }

  render() {
    return (
      <div className="convert-panel">
        <button className="btn red" onClick={this.onCancelPressed}>
          Cancel
        </button>
        <button className="btn" onClick={this.props.convertVideos}>
          Convert!
        </button>
      </div>
    );
  };
}

export default withRouter(
  connect(null, actions)(ConvertPanel)
);

Answer 1

Поэтому, когда DanStarns попросил меня показать, где вызывается convertVideos, и я опубликовал файл ConvertPanel.js, я почувствовал, что что-то там не так, это не так:

export default withRouter(
  connect(null, actions)(ConvertPanel)
);

Нетнужно для mapStateToProps есть? Объект videos был определен при добавлении видео, но он не был задан правильно сервером Redux, когда пришло время конвертировать тип файла указанного объекта.

Поэтому для кнопки конвертации я решилиспользуйте функцию стрелки и затем передайте convertVideos videos prop. Этого само по себе было недостаточно, и я полагал, что мне также нужен mapStateToProps, и после множества мучительных споров я пришел к такому выводу, который сработал:

render() {
    return (
      <div className="convert-panel">
        <button className="btn red" onClick={this.onCancelPressed}>
          Cancel
        </button>
        <button
          className="btn"
          onClick={() => this.props.convertVideos(this.props.videos)}
        >
          Convert!
        </button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return { videos: _.at(state.videos, _.keys(state.videos)) };
};

export default withRouter(
  connect(
    mapStateToProps,
    actions
  )(ConvertPanel)
);

Чтобы вышеперечисленное сработало, мне пришлосьИмпортируйте библиотеку lodash, и мне не нравится, как выглядит mapStateToProps, если у кого-то есть более элегантная версия, я бы с радостью принял ее.