ReactJS Aktualisierung ein einzelnes Objekt im inneren eines Staates array

Ich habe einen Staat namens this.state.devices was ist ein array von device Objekte.

Sagen, dass ich eine Funktion

updateSomething: function (device) {
    var devices = this.state.devices;
    var index = devices.map(function(d){
        return d.id;
    }).indexOf(device.id);

    if (index !== -1) {
       //do some stuff with device
       devices[index] = device;
       this.setState({devices:devices});
    }
}

Problem hier ist, dass jedes mal, wenn this.updateSomething aufgerufen wird, wird das gesamte array aktualisiert wird, und so der gesamte DOM wird neu gerendert. In meiner situation, dies bewirkt, dass der browser einfrieren, wie rufe ich diese Funktion ziemlich jeder zweite, und es gibt viele device Objekte. Aber bei jedem Anruf, nur eine oder zwei dieser Geräte, die tatsächlich aktualisiert werden.

Was sind meine Optionen?

BEARBEITEN

Meiner genauen situation, eine device ist ein Objekt, das wie folgt definiert ist:

function Device(device) {
    this.id = device.id;
    //And other properties included
}

Also jedes Element in dem array der state.devices ist ein bestimmter Augenblick dieses Device, also irgendwo hätte ich:

addDevice: function (device) {
    var newDevice = new Device(device);
    this.setState({devices: this.state.devices.push(device)});
}

Meine aktualisierte Antwort, wie auf updateSomething habe ich:

updateSomething: function (device) {
    var devices = this.state.devices;
    var index = devices.map(function(d){
        return d.id;
    }).indexOf(device.id);

    if (index !== -1) {
       //do some stuff with device
       var updatedDevices = update(devices[index], {someField: {$set: device.someField}});
       this.setState(updatedDevices);
    }
}

Problem ist jetzt, dass ich die Fehlermeldung nicht Lesen kann, den undefinierten Wert von id, und es kommt aus der function Device(); es scheint, dass eine neue new Device() aufgerufen wird und die device ist nicht auf ihn übergegangen ist.

InformationsquelleAutor Kousha | 2015-08-27
  1. 8

    Können Sie die reagieren Unveränderlichkeit Helfer.

    Aus der docs:

    Einfache push -

    var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); //=> [1, 2, 3, 4]

    initialArray noch [1, 2, 3].

    Also bei deinem Beispiel werden Sie wollen, um etwas wie das hier tun:

    if (index !== -1) {
    var deviceWithMods = {}; //do your stuff here
    this.setState(update(this.state.devices, {index: {$set: deviceWithMods }}));
}

    Je nachdem, wie Komplex Ihre device Modell ist, konnte man nur 'ändern' die Objekt-Eigenschaften-in-situ:

    if (index !== -1) {
    this.setState(update(this.state.devices[index], {name: {$set: 'a new device name' }}));
}
    • Meine initialArray ist ein array von instant von Objekten; d.h. ich habe MyObject() und initialArray.push(new MyObject(object)) ist, wie ich diese hinzufügen. Als ich versuchte Ihr Ansatz, ich bekomme ein Fehler in diesem Objekt bei der Initialisierung. Es sagt kann nicht Lesen-Eigenschaft unbekannt; es ist nach einem Feld suchen in object. Ist dies update neu zu erstellen, die jedes Objekt, und das ist, warum es ausfällt?
    • Ich denke, dass man die änderung der Struktur des Staates. Prüfen devices vor Ihrer var updatedDevices... Linie und updatedDevices nach. Ich denke, die Struktur wird anders sein.
    • Ich würde immer noch die gleichen Fehler, auch wenn ich kommentieren this.setState. Es ist die help Funktion wirft Fehler.
    • help Funktion?
    • Sorry, meinte update!!
    • Lassen Sie uns weiter, diese Diskussion im chat.

    InformationsquelleAutor Clarkie
  2. 1

    Meiner Meinung nach mit reagieren Zustand, nur store-Sachen, die wirklich im Zusammenhang mit "Staat", wie sich die Dinge aktivieren, deaktivieren, aber es gibt natürlich auch Ausnahmen.

    Wenn ich du wäre würde ich Weg ziehen, die eine Vielzahl von Endgeräten, wie Sie eine variable und setzen Sie die Dinge gibt, so ist das, was ich tun könnte:

    var devices = [];

var MyComponent = React.createClass({
    ...
    updateSomething: function (device) {

        var index = devices.map(function(d){
            return d.id;
        }).indexOf(device.id);

        if (index !== -1) {
           //do some stuff with device
           devices[index] = device;

           if(NeedtoRender) {
               this.setState({devices:devices});
           }
        }
    }
});
    InformationsquelleAutor Jim
  3. 0

    Aus irgendeinem Grund über Antworten hat bei mir nicht funktioniert. Nach vielen versuchen die unten haben:

    if (index !== -1) {
            let devices = this.state.devices
            let updatedDevice = {//some device}
            let updatedDevices = update(devices, {[index]: {$set: updatedDevice}})
            this.setState({devices: updatedDevices})
    }

    Und ich importiert update aus immutability-helper basierend auf dem Hinweis aus: https://reactjs.org/docs/update.html

    InformationsquelleAutor Wasim Abuzaher
Schreibe einen Kommentar