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

Wenn Sie funktionale Komponenten in React verwenden

const [cars, setCars] = useState([{
  name: 'Audi',
  type: 'Limousine'
}, {
  name: 'BMW',
  type: 'Limousine'
}])

...

const newCar = {
  name: 'Benz',
  type: 'Limousine'
}

const updatedCarsArray = [...cars, newCar];

setCars(updatedCarsArray);

Answer 2

Wie @nilgun im Kommentar erwähnt hat, können Sie die React Immutability Helpers verwenden. Ich habe festgestellt, dass dies sehr nützlich ist.

Aus den Docs:

Einfaches Hinzufügen

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

initialArray bleibt [1, 2, 3].

Answer 3

Wenn Sie eine Funktionskomponente verwenden, verwenden Sie dies wie unten.

const [chatHistory, setChatHistory] = useState([]); // den Zustand definieren

const chatHistoryList = [...chatHistory, {'from':'me', 'message':e.target.value}]; // Neues Array muss aktualisiert werden
setChatHistory(chatHistoryList); // Zustand aktualisieren

Answer 4

this.setState(preState => ({arrayvar: [...prevState.arrayvar, newelement]}))

dies wird dazu beitragen, dieses Problem zu lösen.

Answer 5

Der erste Methode ist für Klassenkomponenten, der zweite für Funktionskomponenten

   constructor (props){
        super();
        this.state = {
          quote : [],
        }

      this.setState({
        quote : [...this.state.quote , newObj]
      })

    const [quote, setQuote] = useState([])
    setQuote(prevState => [...prevState, newObj])