5

我最初认为这是react-redux, axios,lodash和/或react-dropzone;的问题。但是,文件上传正常,但仍会触发此错误。(即使在控制台中显示“失败”,文件也会被发布到服务器)。

react-router-redux根据我在此处阅读的内容,我开始认为该问题可能与以下内容有关:

https://github.com/reactjs/react-router-redux/issues/182

但是,这些建议对我不起作用。

无论如何,我得到一个Uncaught TypeError: Cannot read property 'type' of undefined我无法真正说出导致它的原因或如何解决它的问题。以下是一些错误截图:

不明确的 线

所以这里应该是相关的react-router。只是不确定发生了什么。

入口点:

// ./react/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { routerMiddleware, ConnectedRouter } from 'react-router-redux';

import createHistory from 'history/createBrowserHistory';

// Render on every route
import App from './components/app';
import Navbar from './containers/global/navbar';
import Footer from './containers/global/footer';

// Reducers 
import rootReducer from './reducers';

// SCSS for the project
import styles from '../assets/scss/main.scss';

// IE polyfill error fix
require('es6-promise').polyfill();
var axios = require('axios');

const history = createHistory();

const initialState = {};
const enhancers = [];
const middleware = [thunk, routerMiddleware(history)];

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension

    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension())
    }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const protectedRoute = compose(Timers, RequireAuth);

const store = createStore(rootReducer, initialState, composedEnhancers);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <Navbar />
                <App />
                <Switch>
                      // various routes go here...
                </Switch>
                {/*<Footer />*/}
            </div>
        </ConnectedRouter>
    </Provider>
    , document.querySelector('.container'));

全局减速器和那些与触发错误的操作有关的减速器。

// ./react/reducers/index.js
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import { routerReducer } from 'react-router-redux';
import documentReducer from './documents';

const rootReducer = combineReducers({
    form,
    router: routerReducer,
    documents: documentReducer,
});

export default rootReducer;

// ./react/reducers/documents.js
import {
    DOCUMENTS
} from '../actions/documents';

export default function(state = {}, action) {
    switch(action.type) {
        case DOCUMENTS:
            return { 
                ...state, 
                survey_id: action.payload.survey_id, 
            };
        default:
            return state;
    }

    return state;
}

最后,引发错误时调用的操作。需要指出的一件重要事情:当 the 不在时不会发生错误axios.post_.map实际上是任何类型的数组迭代)。但是,这只会发送一个文件,这不是我所追求的行为。

// ./react/actions/documents.js
import _ from 'lodash';
import axios from 'axios';
import { push } from 'react-router-redux';
import { ROOT_URL } from '../../config/config.json';

// Establish the different types
export const DOCUMENTS = 'documents';

export function submitDocument(files) {
    const uploaders = _.map(files, f => {
        const formData = new FormData();

        formData.append('file', f);

        return axios.post(
            `${ROOT_URL}/api/documents/fileupload`,
            formData,
            { headers: 
                { 
                    'content-type': 'multipart/form-data',
                    'Authorization': 'JWT ' +  sessionStorage.getItem('token')
                }
            }            
        )

    });

    axios.
        all(uploaders)
        .then(response => {
            console.log('Success');
        })
        .catch(error => {
            console.log('Failed');
        })
}

调用该操作的容器也可能会有所帮助:

// ./react/containers/documents/submit_documents.js
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { submitDocument } from '../../actions/documents';
import Dropzone from 'react-dropzone';

class SubmitDocuments extends Component {

    constructor() {
        super();
        this.state = {
            filesToBeSent: [],
            filesPreview: [],
        }

        this.handleClick = this.handleClick.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.onDrop = this.onDrop.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        this.props.submitDocument(this.state.filesToBeSent);
    }

    onDrop(acceptedFiles) {
        var filesToBeSent = this.state.filesToBeSent;       
        _.map(acceptedFiles, f => {
            filesToBeSent.unshift(f);
        });

        filesToBeSent = _.uniqBy(filesToBeSent, 'name');

        var filesPreview = [];

        _.map(filesToBeSent, i => {
            filesPreview.unshift(
                <div key={i.name}>
                    <h5>{i.name} - {i.size} bytes</h5>
                </div>
            )            
        });

        this.setState({
            filesToBeSent,
            filesPreview
        });
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div className='panel panel-default'>
                    <div className='panel-heading'>
                        <h4><strong>Submit Documents</strong></h4>
                    </div>

                    <div className='panel-body'>
                        <Dropzone className='dropzone' onDrop={this.onDrop}> 
                            <h3>Click to add files or drag files here to upload</h3>
                        </Dropzone>
                        {this.state.filesPreview}
                        <button type='submit' disabled={this.state.filesPreview.length < 1} className='btn btn-primary'>Submit</button>
                        <button type='button' className='btn btn-danger' onClick={this.handleClick}>Cancel</button>
                    </div>
                </div>
            </form>
        ); 
    }
}

function mapStateToProps(state) {
    return {
        survey_id: state.documents.survey_id
    }
}

export default connect(mapStateToProps, { submitDocument })(SubmitDocuments);

另外,因为webpack在错误中提到,这里是它的配​​置:

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  context: __dirname,

  entry: [
    '../react/index'  
  ],

  output: {
      path: path.resolve('./src/assets/bundles/'),
      filename: './js/[name]-[hash].js'
  },

  plugins: [
    new BundleTracker({filename: './src/config/webpack-stats.json'}),
    new ExtractTextPlugin({filename: './css/[name].[hash].css', allChunks: true})
  ],

  module: {
    loaders: [
      // {test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=img/[name].[ext]"},
      { 
        test: /\.jsx?$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader',
        query: {
          presets: ["react", "es2015", "stage-1"]
        }
      },
      {
        test: /\.json$/,
        loader: ['json-loader'] 
      },
      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader'] 
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })      
      },   
    ],
  },

  resolve: {
    extensions: ['*', '.js', '.jsx', '.gif']
  }
}

无论如何,不​​确定是什么原因造成的,并且已经尝试解决了几天。否则一切正常,只是看起来不专业。

4

3 回答 3

30

在我的情况下,LastPass 扩展导致了这个错误,而不是我的代码 ( onloadwff.js)。
通过删除扩展来修复它。


根据lastpass-cli/issues/428#comment,您可以通过将 LastPass 扩展设置更新为仅在单击时运行来避免这种情况。

于 2019-08-30T22:00:48.133 回答
15

Redux thunk action creators 返回一个带有 arguments 的函数(dispatch, getState),并且在该函数中,dispatch()当数据可用时,您将执行操作。

您的代码可能会出错,因为您根本没有从动作创建者那里返回任何内容。因为它是异步的,所以返回内部函数:

export function submitDocument(files) {
    return function (dispatch, getState) {
        const uploaders = _.map(files, f => {
            const formData = new FormData();

            formData.append('file', f);

            return axios.post(
                `${ROOT_URL}/api/documents/fileupload`,
                formData,
                { headers:
                    {
                        'content-type': 'multipart/form-data',
                        'Authorization': 'JWT ' +  sessionStorage.getItem('token')
                    }
                }
            )

        });

        axios.
            all(uploaders)
            .then(response => {
                console.log('Success');
                dispatch({ type: DOCUMENTS, payload: ... });
            })
            .catch(error => {
                console.log('Failed');
                dispatch({ type: 'YOUR_ERROR_TYPE', payload: ... });
            })
        };
    }
于 2018-01-04T17:01:44.970 回答
4

我在使用 redux-toolkit 时遇到了类似的问题。我发现这是由错误的 Reducer-Action 导入引起的。它是由使用 DEFAULT 导入引起的,它应该是一个 NAMED 导入。

例如

//Reducer Action export from userSlice
export const { addUser } = userSlice.actions

//Wrong Reducer Action Import
import addUser from '../reducers/userSlice'

//Correct Reducer Action Import
import {addUser} from '../reducers/userSlice'
于 2021-03-20T16:35:50.110 回答