Ich bin ein Javascript / Redux / React-Anfänger, der eine kleine Anwendung mit Redux, React-Redux und React erstellt. Aus irgendeinem Grund erhalte ich bei Verwendung der Funktion mapDispatchToProps in Verbindung mit connect (React-Redux-Bindung) einen TypeError, der angibt, dass der Versand keine Funktion ist, wenn ich versuche, die resultierende Requisite auszuführen. Wenn ich den Versand jedoch als Requisite aufrufe (siehe die Funktion setAddr im bereitgestellten Code), funktioniert es.
Ich bin gespannt, warum dies so ist. In der TODO-Beispiel-App in den Redux-Dokumenten wird die mapDispatchToProps-Methode auf die gleiche Weise eingerichtet. Wenn ich console.log (dispatch) innerhalb der Funktion habe, heißt es, dass dispatch vom Typ object ist. Ich könnte den Versand weiterhin auf diese Weise verwenden, aber ich würde mich besser fühlen, wenn ich wüsste, warum dies geschieht, bevor ich mit Redux fortfahre. Ich benutze Webpack mit Babel-Loadern zum Kompilieren.
Mein Code:
import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import { setAddresses } from '../actions.js';
import GeoCode from './geoCode.js';
import FlatButton from 'material-ui/lib/flat-button';
const Start = React.createClass({
propTypes: {
onSubmit: PropTypes.func.isRequired
},
setAddr: function(){
this.props.dispatch(
setAddresses({
pickup: this.refs.pickup.state.address,
dropoff: this.refs.dropoff.state.address
})
)
},
render: function() {
return (
<div>
<div className="row">
<div className="col-xs-6">
<GeoCode ref='pickup' />
</div>
<div className="col-xs-6">
<GeoCode ref='dropoff' />
</div>
</div>
<div className="row">
<div className="col-xs-6">
<FlatButton
label='Does Not Work'
onClick={this.props.onSubmit({
pickup: this.refs.pickup.state.address,
dropoff: this.refs.dropoff.state.address
})}
/>
</div>
<div className="col-xs-6">
<FlatButton
label='Works'
onClick={this.setAddr}
/>
</div>
</div>
</div>
);
}
})
const mapDispatchToProps = (dispatch) => {
return {
onSubmit: (data) => {
dispatch(setAddresses(data))
}
}
}
const StartContainer = connect(mapDispatchToProps)(Start)
export default StartContainer
Prost.
quelle
Antworten:
Wenn Sie
mapDispatchToProps
ohne einemapStateToProps
nurnull
für das erste Argument verwenden möchten .export default connect(null, mapDispatchToProps)(Start)
quelle
mapDispatchToProps
, fügen Sie dieses Argument einfach nicht hinzu zuconnect
:connect(mapStateToProps)(MyComponent)
Ihnen fehlt nur das erste Argument
connect
, nämlich diemapStateToProps
Methode. Auszug aus der Redux todo App:quelle
Verwenden
anstatt
quelle
Ich habe es gelöst, indem ich die Argumente ausgetauscht habe, die ich verwendet habe
was falsch ist. Das
mapStateToProps
muss das erste Argument sein:Es klingt jetzt offensichtlich, könnte aber jemandem helfen.
quelle
Ich brauchte ein Beispiel mit,
React.Component
also poste ich es:quelle
Problem
Hier sind einige Dinge zu beachten, um das Verhalten der verbundenen Komponente in Ihrem Code zu verstehen:
Die Arität der
connect
Dinge:connect(mapStateToProps, mapDispatchToProps)
React-Redux-Aufrufe
connect
mit dem erstenmapStateToProps
und dem zweiten ArgumentmapDispatchToProps
.Daher
mapDispatchToProps
behandelt React-Redux das , obwohl Sie es bestanden haben , tatsächlich alsmapState
das erste Argument. Sie erhalten weiterhin die injizierteonSubmit
Funktion in Ihrer Komponente, da die Rückgabe vonmapState
mit den Requisiten Ihrer Komponente zusammengeführt wird. Aber so geht das nichtmapDispatch
soll man nicht spritzen.Sie können
mapDispatch
ohne Definition verwendenmapState
. Übergeben Sienull
anstelle vonmapState
und Ihre Komponente unterliegt keinen Speicheränderungen.Verbundene Komponente empfängt
dispatch
standardmäßig, wenn Nein angegebenmapDispatch
istAußerdem erhält Ihre Komponente,
dispatch
weil sienull
für ihre zweite Position für empfangen hatmapDispatch
. Wenn Sie ordnungsgemäß übergebenmapDispatch
, wird Ihre Komponente nicht empfangendispatch
.Gang und gäbe sein
Das Obige beantwortet, warum sich die Komponente so verhalten hat. Es ist jedoch üblich, dass Sie Ihren Aktionsersteller einfach mit
mapStateToProps
der Objektkürzel übergeben. Und nennen Sie das innerhalb Ihrer Komponente.onSubmit
Das heißt:quelle
Wenn Sie nicht
mapDispatchToProps
als zweites Argument angeben, wie folgt:Dann erhalten Sie automatisch den Versand zu den Requisiten der Komponente, sodass Sie einfach:
ohne mapDispatchToProps
quelle
Ich benutze so .. sein leicht zu verstehendes erstes Argument ist mapStateToProps und das zweite Argument ist mapDispatchToProps am Ende verbinden mit Funktion / Klasse.
quelle
Manchmal tritt dieser Fehler auch auf, wenn Sie die Reihenfolge der Komponentenfunktionen ändern, während Sie die Verbindung übergeben.
Falsche Reihenfolge:
Korrekten Reihenfolge:
quelle
Eine Falle, in die einige möglicherweise eintreten, wird von dieser Frage abgedeckt, aber in den Antworten nicht behandelt, da sie sich in der Codestruktur geringfügig unterscheidet, aber genau denselben Fehler zurückgibt.
Dieser Fehler tritt auf, wenn
bindActionCreators
diedispatch
Funktion verwendet und nicht übergeben wirdFehlercode
Fester Code
Die Funktion
dispatch
fehlte im Fehlercodequelle
Die React-Redux-Funktion 'connect' akzeptiert zwei Argumente: erstens mapStateToProps und zweitens mapDispatchToProps.
export default connect(mapStateToProps, mapDispatchToProps)(Index);
`Wenn wir den Status nicht aus Redux abrufen möchten, setzen wir null anstelle von mapStateToProps.
export default connect(null, mapDispatchToProps)(Index);
quelle