Ich habe eine API, die Daten auf dem Server postet, und ich möchte diese Antwort in einer anderen Datei erhalten. Dies ist eine Funktion in der action.js
Datei. Ich möchte die Antwort dieses Versprechens an eine andere Komponente zurücksenden, wo es aufgerufen wird.
export const saveOrder = data => dispatch => {
fetch(`${baseUrl}/save-order`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
body: data,
})
.then(res => res.json())
.then(json => {
console.log('json1', json);
**want to return this json variable**
alert('order placed');
})
.catch(error => {
console.log('error in saving', error);
});
};
Dies ist meine Komponente, bei der ich die Antwort erhalten möchte, wenn die Bestellung erfolgreich aufgegeben wurde. Ich habe async und await versucht, aber es hat nicht funktioniert.
const postOrder = () => {
var data = new FormData();
data.append('userId', state.user.id);
dispatch(saveOrder(data));
};
Lösung des Problems
Es sieht so aus, als würden Sie Redux für die Zustandsverwaltung verwenden. Sie verwenden jedoch nicht die Versandfunktion, um die erhaltenen Daten in saveOrder zu speichern. Eigentlich ruft Ihr Dispatch nur den notwendigen Thunk auf, und bereits darin müssen Sie Dispatch mit einer Aktion aufrufen, die die Daten im Store speichert. Dann können Sie direkt in der Komponente selbst mit dem Selektor die Daten aus dem Speicher abrufen, wenn sie verfügbar sind. Im Allgemeinen verwenden Sie redux-thunk nur, um eine API-Anforderung auszuführen, und folgen nicht den erforderlichen Konzepten. Das Nutzungsmodell können Sie hier einsehen:
https://redux.js.org/tutorials/essentials/part-5-async-logic
Keine Kommentare:
Kommentar veröffentlichen