Korrigieren Sie die Änderung von Statusarrays in ReactJS

Ich möchte am Ende eines stateArrays ein Element hinzufügen. Ist dies der richtige Weg, dies zu tun?

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

Ich befürchte, dass das Ändern des Arrays an Ort und Stelle pushProbleme verursachen könnte - ist es sicher?

Die Alternative, eine Kopie des Arrays zu erstellen, und setStatedas scheint verschwenderisch.

In den React-Dokumenten heißt es:

Behandle diesen Zustand so, als wäre er unveränderlich.

Sie pushwerden den Status direkt mutieren und dies könnte möglicherweise zu fehleranfälligem Code führen, selbst wenn Sie den Status danach erneut "zurücksetzen". F.ex, es könnte dazu führen, dass einige Lebenszyklusmethoden wie componentDidUpdatenicht ausgelöst werden.

In späteren React-Versionen wird empfohlen , beim Ändern von Status eine Updater- Funktion zu verwenden, um Rennbedingungen zu vermeiden:

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

Die Speicherverschwendung ist kein Problem im Vergleich zu den Fehlern, die bei nicht standardmäßigen Statusänderungen auftreten können.

Alternative Syntax für frühere React-Versionen

Sie können verwenden concat, um eine saubere Syntax zu erhalten, da ein neues Array zurückgegeben wird:

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})

In ES6 können Sie den Spread Operator verwenden :

this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})

Am einfachsten, wenn Sie verwenden ES6.

initialArray = [1, 2, 3];

newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]

Neues Array wird sein [1,2,3,4]

um Ihren Status in React zu aktualisieren

this.setState({
         arrayvar:[...this.state.arrayvar, newelement]
       });

Erfahren Sie mehr über die Array-Destrukturierung

Der einfachste Weg mit ES6:

this.setState(prevState => ({
    array: [...prevState.array, newElement]
}))

React kann Batch-Updates durchführen. Daher besteht der richtige Ansatz darin, setState eine Funktion zur Verfügung zu stellen, mit der das Update durchgeführt wird.

Für das React-Update-Addon funktioniert Folgendes zuverlässig:

this.setState( state => update(state, {array: {$push: [4]}}) );

oder für concat ():

this.setState( state => ({
    array: state.array.concat([4])
}));

Das Folgende zeigt, was https://jsbin.com/mofekakuqi/7/edit?js,output als Beispiel dafür ist, was passiert, wenn Sie etwas falsch machen.

Der Aufruf von setTimeout () fügt drei Elemente korrekt hinzu, da React keine Aktualisierungen innerhalb eines setTimeout-Rückrufs stapelweise durchführt (siehe https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ ).

Der Buggy onClick fügt nur "Third" hinzu, der feste jedoch wie erwartet F, S und T.

class List extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      array: []
    }

    setTimeout(this.addSome, 500);
  }

  addSome = () => {
      this.setState(
        update(this.state, {array: {$push: ["First"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Second"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Third"]}}));
    };

  addSomeFixed = () => {
      this.setState( state => 
        update(state, {array: {$push: ["F"]}}));
      this.setState( state => 
        update(state, {array: {$push: ["S"]}}));
      this.setState( state => 
        update(state, {array: {$push: ["T"]}}));
    };



  render() {

    const list = this.state.array.map((item, i) => {
      return <li key={i}>{item}</li>
    });
       console.log(this.state);

    return (
      <div className='list'>
        <button onClick={this.addSome}>add three</button>
        <button onClick={this.addSomeFixed}>add three (fixed)</button>
        <ul>
        {list}
        </ul>
      </div>
    );
  }
};


ReactDOM.render(<List />, document.getElementById('app'));

Wie im Kommentar bei @nilgun erwähnt, können Sie die Helfer für die Reaktion auf Unveränderlichkeit verwenden . Ich fand das super nützlich.

Aus den Dokumenten:

Einfacher Druck

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

initialArray ist immer noch [1, 2, 3].

Wenn Sie eine Funktionskomponente verwenden, verwenden Sie diese bitte wie folgt.

const [chatHistory, setChatHistory] = useState([]); // define the state

const chatHistoryList = [...chatHistory, {'from':'me', 'message':e.target.value}]; // new array need to update
setChatHistory(chatHistoryList); // update the state

Für das Hinzufügen eines neuen Elements zum Array push()sollte die Antwort sein.

Für das Entfernen des Elements und das Aktualisieren des Status des Arrays funktioniert der folgende Code für mich. splice(index, 1)kann nicht arbeiten.

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

// index is the index for the element you want to remove
const newArrayState = arrayState.filter((value, theIndex) => {return index !== theIndex});
setArrayState(newArrayState);

Ich versuche, einen Wert in einem Array-Status zu pushen und einen solchen Wert festzulegen und den Status-Array- und Push-Wert durch die Map-Funktion zu definieren.

 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})
            })

Dies funktionierte für mich, um ein Array innerhalb eines Arrays hinzuzufügen

this.setState(prevState => ({
    component: prevState.component.concat(new Array(['new', 'new']))
}));

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

Hinzufügen eines neuen Elements zu einer Funktionszustandskomponente:

Definieren Sie die Statusdaten:

    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

<Button
    // pass the current state data to the handleAdd function so we can append to it.
    onClick={() => handleAdd(data)}>
    Add a row
</Button>

function handleAdd(currentData) {

        // return last data array element
        let lastDataObject = currentTableData[currentTableData.length - 1]

        // assign last elements ID to a variable.
        let lastID = Object.values(lastDataObject)[0] 

        // build a new element with a new ID based off the last element in the array
        let newDataElement = {
            id: lastID + 1,
            name: 'Jill',
            age: 55,
        }

        // build a new state object 
        const newStateData = [...currentData, newDataElement ]

        // update the state
        setData(newStateData);

        // print newly updated state
        for (const element of newStateData) {
            console.log('New Data: ' + Object.values(element).join(', '))
        }

}

this.setState({
  arrayvar: [...this.state.arrayvar, ...newelement]
})

//------------------code is return in typescript 

const updateMyData1 = (rowIndex:any, columnId:any, value:any) => {

    setItems(old => old.map((row, index) => {
        if (index === rowIndex) {
        return Object.assign(Object.assign({}, old[rowIndex]), { [columnId]: value });
    }
    return row;
}));

Dieser Code funktioniert für mich:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
    this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
  })