电子无法读取我上传的未定义视频的属性'路径'-电脑我帮您

电子无法读取我上传的未定义视频的属性'路径'

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

未捕获的异常：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）在WebContents。（/用户/ danale /项目/ ElectronCode /样板/转换/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)
);

回答如下：

因此，当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的外观，如果有人拥有更优雅的版本，我将愿意采用它。