Sollte die Komponente re-Rendern nach Formular senden und Aktion löst?

Ich habe eine Komponente, die eine form hat, wenn ein Benutzer auf den submit-button und nachdem die Validierung erfolgreich ist, wird eine Aktion auslöst (dies alles geschieht innerhalb des submit-Ereignis).

Sollte die Komponente re-Rendern nach der Aktion löst?

Derzeit, ich sehe das nicht passiert, was könnte der Grund sein?
Lassen Sie mich hinzufügen, was hier passiert.
1) Formular übermittelt;
2) die Validierung ausgeführt wird;
3) die Aktion auslöst (es sendet die Daten an backend zum speichern in der Datenbank);

In den reducer habe ich definiert:

    const messages = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case ADD_MESSAGE_SUCCESS:
            return { ...state, message: action.message, error: null, isMessageLoading: false };
        case ADD_MESSAGE_FAILURE:
            return { ...state, message: null, error: action.error, isMessageLoading: false };
        default:
            return state;
    }
};

Und in der Konsole anmelden, kann ich deutlich sehen, dass der Zustand geändert hat.
Aber keine re-Rendern, tritt in diesem Stadium.

const mapStateToProps = (state) => {
    return {
        message: state.messages.message,
        isMessageLoading: state.messages.isMessageLoading
    }
};

So, wenn die Aktion auslöst, die Requisiten, die aktualisiert wird.

Dies ist der code, der eine Aktion

    export const addMessage = (message) => {
    return (dispatch) => {
        dispatch({ type: ADD_MESSAGE });
        return fetch(`http://localhost:8080/api/contacts`, {
            credentials: 'include',
            method: 'POST',
            body: JSON.stringify(message),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
        }).then(response => {
            return response.json();
        }).then((data) => {
            dispatch(addMessageSuccess(data));
        }).catch(error => {
            console.log(`An error occurred while adding contact message: ${error}`);
            dispatch(addMessageFailure(error));
        });
    };
};
  • Die Komponente wird in der Regel nur rerender wenn die Requisiten oder Status geändert haben. Wenn dem Absenden des Formulars nicht tun, entweder von diesen Dingen, dann würde ich nicht erwarten, dass es. Post code, wenn Sie möchten detailliertere Antworten.
  • Wenn der Zustand nicht ändern, wird die Komponente nicht neu Rendern
  • Die ausgeführten Aktion ändert den Zustand, ich kann deutlich sehen, es in der Konsole anmelden.
  • wie sind Sie mit der Bestätigung, dass die Komponente nicht re-Rendern?
  • Dann geben Sie bitte Ihren code
  • Ich fügte hinzu, Konsole.log(„Re-render“) in der render-Teil der Komponente.
  • Wenn die form-Komponente verbunden ist, zum speichern (was ich davon ausgehen, es ist, wenn es Versand-Aktionen), dann eine von den Requisiten zu ändern (D. H. die Werte in mapStateToProps) für die Komponente, ihn neu zu Rendern.
  • Ich habe die mapStateToProps zur post. Es hilft nicht.

InformationsquelleAutor nomadus | 2017-04-18



One Reply
  1. 3

    Angeschlossenen Komponenten werden neu gerendert, wenn sich der Zustand ändert (und der Zustand ausgewählt wird, die in mapStateToProps)

    In deinem Fall, beide message oder isMessageLoading auslösen können das update.

    Beachten Sie, dass, wenn die Nachricht ist eine Zeichenfolge, und versenden Sie die Aktionen, die den gleichen message-string, Ihre Komponente wird nicht re-Rendern. Zum Beispiel die aktuellen message Zustand ist success, und versenden Sie eine andere Aktion, die auch enthält message: success:

    {
      type: ADD_MESSAGE_SUCCESS,
      message: 'success'
    }

    Dann Ihre Komponente nicht aktualisiert. Deshalb gibt es einige Optimierungen im Reagieren-Redux ist connect

    Einem einfachen Beispiel hier: https://jsfiddle.net/njk5teoh/ (ich habe auch Sie error auf die Komponente), klicken Sie auf die senden-Schaltfläche mehrmals und sehen Sie die Konsole an.

    Wenn dies nicht Ihr problem lösen, müssen Sie möglicherweise, um eine reproduzierbare jsfiddle/codepen oder repo.

    • vielen Dank für die ausführliche Erklärung, ich war in der Lage zu reproduzieren das gleiche Verhalten, wenn es keine RUHE-Operationen in der Versand-Aktion. Aber in meinem Fall habe ich eine Aktion speichern, das speichern von Daten in der Datenbank und in diesem Fall, funktioniert es nicht.
    • Ich habe den Aktions-code, mit dieser Aktion, bekomme ich nie das re-Rendern. Von meinem Verständnis, der fetch ist async, so die handleSubmit ist abgeschlossen, wenn der aktualisierte Zustand wird macht aus der Datenbank.
    • Was ist die data von addMessageSuccess(data)?
    • Sie haben, um sicherzustellen, dass Ihr Zustand nicht geändert haben.
    • Ich werde auch empfehlen, dass Sie verwenden redux-logger oder redux-devtool, so dass Sie sehen können, Ihr Zustand ändert sich leicht. Wenn Ihr Zustand geändert haben, stellen Sie sicher, dass Sie nicht shouldComponentUpdate in der Komponente
    • Einige andere mögliche Fehler: 1. Ihr nicht erklären, oder importieren Sie die Aktions-Typen (wie ADD_MESSAGE_SUCCESS) richtig; 2. die Struktur des action-Objekt ist falsch
    • Die ich erstellt habe, JSFiddle, jsfiddle.net/nomadus/njk5teoh/28. Er macht auf den ersten Versuch, aber die nachfolgenden versuche nicht re-Rendern. Obwohl es sollte re-Rendern nach jeder änderungen
    • Das ist es, was ich eben beschrieben habe in meiner Antwort. Ihre state.message wird nicht aktualisiert. connected Komponenten machen einen flachen Vergleich zu den prev und next state, da die message ist immer das gleiche, die Komponente wird nicht neu gerendert
    • Auch die App brauchen keinen lokalen Zustand. Diese Staaten sind schon gespeichert in der redux-Shop
    • Ich übersprungen hinzufügen-message-Attribut in der Aktion haben, habe ich jetzt korrigiert und in JSFiddle kann ich sehen, dass die Komponente neu gerendert. Dies geschieht nicht mit meinem lokalen Projekt, lassen Sie mich untersuchen, was ist der Unterschied zwischen Ihnen.
    • hey @CodinCat habe ich gefunden, was war das Problem, es war mein Fehler, ich konfiguriert die Speicher falsch, nachdem ich es richtig, jetzt sehe ich die Komponente neu Rendern. Ich akzeptiere Ihre Antwort, wie es mir geholfen, zu analysieren, einmal mehr meinen code.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.