Electron 无法读取我上传的未定义视频的属性“路径”答案

【问题标题】：Electron cannot read property 'path' of undefined videos I have uploadedElectron 无法读取我上传的未定义视频的属性“路径”
【发布时间】：2020-02-08 09:59:26
【问题描述】：

我正在尝试将已成功加载的视频转换为带有 React 项目的 Electron。我添加视频没有问题，但是当我尝试将视频转换为其他文件类型时，我收到以下错误：

未捕获的异常：TypeError：无法读取属性“路径” 不明确的在 EventEmitter.ipcMain.on (/Users/danale/Projects/ElectronCode/boilerplates/convert/index.js:37:32) 在 emitTwo (events.js:106:13) 在 EventEmitter.emit (events.js:191:7) 在 WebContents。（/Users/danale/Projects/ElectronCode/boilerplates/convert/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/api/web-contents.js:247:37）在 emitTwo (events.js:106:13) 在 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)
);

【问题讨论】：

您能告诉我们convertVideos 的调用位置吗？

标签： javascript node.js electron

【解决方案1】：

所以当 DanStarns 要求我显示 convertVideos 的调用位置并发布了 ConvertPanel.js 文件时，我觉得那里有些不对劲，这似乎不对：

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

那里不需要mapStateToProps？ videos 对象是在添加视频时定义的，但在转换该对象的文件类型时，Redux 后端没有正确设置它。

所以对于转换按钮，我决定使用箭头函数，然后将 convertVideos 传递给 videos 属性。这本身是不够的，我相信我还需要一个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 的样子，如果有人有更优雅的版本，我愿意采用它。

【讨论】：