redux Aktion "keine Funktion" wird ausgelöst, wenn von der Komponente
Ich versuche, eine app erstellen, die mit einer CSV-upload. Wenn Sie eine CSV hochgeladen ist, wird es den Zustand ändern und dann werde ich Parsen von CSV nach JSON und machen Sachen mit ihm. Die Idee ist, eine Datei hochladen und update-Status. Sobald dieser Zustand ist aktualisiert, ich würde übergeben Sie die CSV ein Meteor.Methode zum Parsen von JSON.
Ich bin mit Meteor, zu Reagieren und Redux. Ich habe eine Komponente für das hochladen, eine Aktion und einen Druckminderer. Alle Dateien sind unten - ich bin neu auf Meteor Reagieren und Redux und ich kann nicht herausfinden, für das Leben von mir, warum das nicht funktioniert. Ich glaube nicht, dass ich bin voll und ganz verstehen, was ich versuche zu erreichen. Alle Vorschläge sind willkommen.
FEHLER Uncaught TypeError: fileUpload ist nicht eine Funktion 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);
Ich verstehe nicht, warum fileUpload "keine Funktion", wenn es eine Aktion und es wird importiert.? Wenn jemand eine hand zu verleihen, ich würde es zu schätzen wissen.
Dank!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Weil Sie definiert ein argument genannt fileUpload in deine render-Methode. Entfernen Sie alle Argumente, die Sie in Ihrem render-Methode. Die Klasse hat die Schließung Umfang über die importierten Module, so dass Sie verweisen können Sie überall in der Klasse.
Ein Grund für dieses problem, die ist leicht zu übersehen, ist folgende:
Wenn wir definieren Sie die component-Klasse mit einem Standard-export & ein export benannt wie diese:
Dann sollten wir den import der Standard-export nicht export benannt:
Diese importiert die Standard-export & sind korrekt mit redux
import MyComponent from "./thePath"
Diese importiert die benannte export & funktioniert nicht mit redux
import {MyComponent} from "./thePath"
Der Grund
Wir haben zum importieren der Standard-export, die beim Rendern der Komponente, um die redux connect() Funktion höherer Ordnung, die wir exportiert haben.
Manchmal, wenn Sie allein auf den editor für den automatischen import, importiert es die namens-export (die nicht über die redux-connect) & deshalb geben, dass der Fehler
Bottom line
Stellen Sie sicher, dass der import der Standard-export (ohne Klammern) beim Aufruf der Komponente zu verwenden redux connect() richtig
Starten Sie Ihre Anwendung Neu
Ich hatte das gleiche problem, nur weil ich vergessen habe neu zu starten meiner Anwendung. Alle Redux Aktionen eingerichtet sind, die auf den ersten Zustand, so dass die Redux-Shop hatte keine Ahnung, dass ich hatte, implementiert eine neue Funktion.
Hoffe, das jemand hilft.
Scheint es, dass die importierten Elemente sind der groß-und Kleinschreibung, wenn Sie Sie importieren. Dies ist, was verursacht dieses Problem für mich als gut, so dass nur ein heads-up.
Hatte ich das problem, wenn ich neue importieren, um bindActionCreators und statt { } umwickelte ich es mit [ ], so überprüfen Sie Ihre Klammern
Falls es hilft niemandem, erhielt ich
TypeError: this.props.setCategories is not a function
bis ich gemerkt habe, dass der Wert fürsetCategories
hätte ein Rückruf: