Question

我正在尝试使用CSV上传创建应用。当上传CSV时，它将改变状态，然后我将从CSV解析为JSON并对其进行处理。想法是上传文件并更新状态。更新该状态后，我会将CSV传递给Meteor.method以解析为JSON。我正在使用Meteor，React和Redux。我有一个处理上传，动作和减速器的组件。所有文件都在下面 - 我是Meteor，React和Redux的新手，我无法弄清楚为什么这不起作用。我不认为我完全理解我想要完成的事情。欢迎任何建议。

错误 - 未捕获TypeError：fileUpload不是函数UploadCSV.jsx

// ACTIONS - fileUpload.js
export default function fileUpload(file) {
  return {
    type: 'FILE_UPLOAD',
    file
  };
}



//REDUCERS - upLoad.js
export default function upLoad(state = 'NO_FILE', action = {}) {
  switch (action.type) {
    case 'FILE_UPLOAD':
      return action.file;
    default:
      return state;
  }
}



//COMPONENTS - UploadCSV.jsx
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Dropzone from 'react-dropzone';
import { RaisedButton } from 'material-ui';
import { Colors } from 'material-ui';
import fileUpload from '../actions/fileUpload.js';
import { uploadCSV } from '../actions/uploadCSV.js';

class UploadCSV extends Component {
  render( dispatch, file, fileUpload ) {
    const onDrop = (file) => {
      console.log(file);
    }
    const upLoad = () => {
      this.props.dispatch(fileUpload(file));
    };
    return (
      <div>
        <Dropzone accept="csv"
                  onDrop={ () => {
                      return upLoad();
                    }}>
          <div>Click or drop files here.</div>
        </Dropzone>
      </div>
    )
  }
}

export default connect()(UploadCSV);

我不明白为什么fileUpload是“不是函数”，如果它是一个动作并且正在导入它。如果有人可以伸出援手，我将不胜感激。

谢谢！

Answer 1

重新启动您的应用

我有同样的问题，因为我忘了重新启动我的应用程序。所有Redux操作都是在第一个状态下设置的，因此Redux Store不知道我已经实现了新功能。

希望这有助于某人。

Answer 2

此问题很容易忽略的原因如下：

如果我们使用默认导出和命名导出定义组件类 ，如下所示：

UIBarButtonItem

然后，我们应该导入默认导出而不是命名的导出：

这将导入默认导出，并且可以与redux一起正常使用

// named export export class MyComponent extends React.Component{ ....... function mapDispatchToProps(dispatch){ return bindActionCreators({reduxAction},dispatch) } // default export export default connect(null,mapDispatchToProps)(MyComponent);

这将导入命名的导出内容，并且无法与redux一起使用

import MyComponent from "./thePath"

原因

我们必须在渲染组件时导入默认导出，以便使用我们已导出的redux connect（）高阶函数 。

有时候，如果您仅依赖于编辑器的自动导入，它将导入指定的导出（没有redux连接），因此会出现该错误

底线

在调用组件以正确使用redux connect（）时，请确保导入默认导出（不带花括号）

Answer 3

因为您在render方法中定义了一个名为fileUpload的参数。删除您在render方法中定义的所有参数。该类具有所有导入模块的闭包范围，因此您可以在类中的任何位置引用它们。

Answer 4

导入的元素在导入时似乎不区分大小写。这也是导致我同样问题的原因，所以只是一个抬头。

Answer 5

当我向bindActionCreators添加新导入而不是{}时，我遇到了这个问题我用[]包装它，所以检查你的括号

function mapDispatchToProps(dispatch) {
  return bindActionCreators({...UserActions, ...ModalActions}, dispatch)
}

Answer 6

万一它对任何人都有帮助，我会收到TypeError: this.props.setCategories is not a function，直到我注意到setCategories的值应该是回调：

const mapDispatchToProps = dispatch => {
    return {
        setCategories: dispatch(actionCreator.setCategories()),  // cause of error
        onAgeUp: () => dispatch(actionCreator.ageUp(1)),
        onAgeDown: () => dispatch(actionCreator.ageDown(1))
    };
};

从组件调度时，redux动作“不是函数”

6 个答案:

此问题很容易忽略的原因如下：

原因

底线