Korrekte Änderung der Zustandsarrays in React.js

Question

Ich möchte ein Element am Ende eines state-Arrays hinzufügen. Ist dies der richtige Weg?

this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });

Ich mache mir Sorgen, dass das direkte Ändern des Arrays mit push Probleme verursachen könnte - ist das sicher?

Die Alternative, eine Kopie des Arrays zu erstellen und diese mit setState festzulegen, scheint verschwenderisch.

Answer 1

Was ich mache, ist einen Wert außerhalb des Zustands zu aktualisieren und ein forceUpdate() durchzuführen, je weniger Dinge von React verwaltet werden, desto besser, da man mehr Kontrolle darüber hat, was aktualisiert wird. Außerdem kann das Erstellen eines neuen Arrays für jede Aktualisierung zu teuer sein, wenn die Aktualisierungen schnell erfolgen.

Answer 2

Hier ist ein Beispiel für Reactjs Hook aus dem Jahr 2020, von dem ich dachte, dass es anderen helfen könnte. Ich benutze es, um neue Zeilen zu einer Reactjs-Tabelle hinzuzufügen. Lassen Sie mich wissen, ob ich etwas verbessern könnte.

Hinzufügen eines neuen Elements zu einem funktionalen Statuskomponent:

Definieren Sie die Zustandsdaten:

    const [data, setData] = useState([
        { id: 1, name: 'John', age: 16 },
        { id: 2, name: 'Jane', age: 22 },
        { id: 3, name: 'Josh', age: 21 }
    ]);

Lassen Sie eine Schaltfläche eine Funktion auslösen, um ein neues Element hinzuzufügen

 handleAdd(data)}>
    Eine Zeile hinzufügen

function handleAdd(currentData) {

        // Gib das letzte Element des Datenarrays zurück
        let lastDataObject = currentTableData[currentTableData.length - 1]

        // Weise die ID des letzten Elements einer Variablen zu.
        let lastID = Object.values(lastDataObject)[0] 

        // Erstelle ein neues Element mit einer neuen ID basierend auf dem letzten Element im Array
        let newDataElement = {
            id: lastID + 1,
            name: 'Jill',
            age: 55,
        }

        // Erstelle ein neues Statusobjekt 
        const newStateData = [...currentData, newDataElement ]

        // Aktualisiere den Status
        setData(newStateData);

        // Drucke den neu aktualisierten Status
        for (const element of newStateData) {
            console.log('Neue Daten: ' + Object.values(element).join(', '))
        }

}

Answer 3

Zur Hinzufügung eines neuen Elements in das Array sollte push() die Antwort sein.

Zum Entfernen eines Elements und Aktualisieren des Array-Zustands funktioniert der folgende Code für mich. splice(index, 1) funktioniert nicht.

const [arrayState, setArrayState] = React.useState([]);
...

// index ist der Index des Elements, das du entfernen möchtest
const newArrayState = arrayState.filter((value, theIndex) => {return index !== theIndex});
setArrayState(newArrayState);

Answer 4

Ich hatte ein ähnliches Problem, als ich den Array-Zustand ändern wollte, während die Position des Elements im Array beibehalten wurde

Dies ist eine Funktion zum Umschalten zwischen "like" und "unlike":

    const liker = (index) =>
        setData((prevState) => {
            prevState[index].like = !prevState[index].like;
            return [...prevState];
        });

wie wir sehen können, nimmt die Funktion den Index des Elements im Array-Zustand, und wir gehen weiter und ändern den alten Zustand und bauen den Zustandsbaum neu auf

Answer 5

Ich versuche, den Wert in einem Array-Zustand zu drücken und den Wert so zu setzen und den Zustandsarray zu definieren und den Wert mit der map-Funktion zu drücken.

 this.state = {
        createJob: [],
        totalAmount:Number=0
    }

 your_API_JSON_Array.map((_) => {
                this.setState({totalAmount:this.state.totalAmount += _.your_API_JSON.price})
                this.state.createJob.push({ id: _._id, price: _.your_API_JSON.price })
                return this.setState({createJob: this.state.createJob})
            })