Modification correcte des tableaux d'état dans ReactJS

Je veux ajouter un élément à la fin d'un statetableau, est-ce la bonne façon de le faire?

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

Je crains que la modification de la baie en place avec pushpuisse causer des problèmes - est-ce sûr?

L'alternative de faire une copie du tableau, et setStatecela semble inutile.

Les documents React disent:

Traitez cet état comme s'il était immuable.

Votre pushmutera directement l'état et cela pourrait potentiellement conduire à un code sujet aux erreurs, même si vous "réinitialisez" à nouveau l'état par la suite. F.ex, cela pourrait conduire à ce que certaines méthodes de cycle de vie comme componentDidUpdatene se déclenchent pas.

L'approche recommandée dans les versions ultérieures de React consiste à utiliser une fonction de mise à jour lors de la modification des états pour éviter les conditions de concurrence:

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

Le «gaspillage» de mémoire n'est pas un problème par rapport aux erreurs que vous pourriez rencontrer en utilisant des modifications d'état non standard.

Syntaxe alternative pour les versions antérieures de React

Vous pouvez utiliser concatpour obtenir une syntaxe propre car elle retourne un nouveau tableau:

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

Dans ES6, vous pouvez utiliser l' opérateur Spread :

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

Le plus simple, si vous utilisez ES6.

initialArray = [1, 2, 3];

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

Un nouveau tableau sera [1,2,3,4]

mettre à jour votre état dans React

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

En savoir plus sur la déstructuration des baies

La manière la plus simple avec ES6:

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

React peut effectuer des mises à jour par lots et, par conséquent, l'approche correcte consiste à fournir à setState une fonction qui effectue la mise à jour.

Pour l'addon de mise à jour React, les éléments suivants fonctionneront de manière fiable:

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

ou pour concat ():

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

Ce qui suit montre ce que https://jsbin.com/mofekakuqi/7/edit?js,output comme exemple de ce qui se passe si vous vous trompez.

L'invocation setTimeout () ajoute correctement trois éléments car React n'effectuera pas de mises à jour par lots dans un rappel setTimeout (voir https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ ).

Le buggy onClick n'ajoutera que "Third", mais le fixe, ajoutera F, S et T comme prévu.

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'));

Comme @nilgun l'a mentionné dans le commentaire, vous pouvez utiliser les assistants react immuability . J'ai trouvé que c'était super utile.

De la documentation:

Poussée simple

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

initialArray est toujours [1, 2, 3].

Si vous utilisez un composant fonctionnel, veuillez l'utiliser comme ci-dessous.

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

Pour ajouter un nouvel élément dans le tableau, push()devrait être la réponse.

Pour supprimer l'élément et mettre à jour l'état du tableau, le code ci-dessous fonctionne pour moi. splice(index, 1)ne peut pas fonctionner.

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

J'essaie de pousser la valeur dans un état de tableau et de définir une valeur comme celle-ci et de définir le tableau d'état et de pousser la valeur par la fonction de carte.

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

Cela a fonctionné pour moi d'ajouter un tableau dans un tableau

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

Voici un exemple de Reactjs Hook en 2020 qui, selon moi, pourrait aider les autres. Je l'utilise pour ajouter de nouvelles lignes à une table Reactjs. Faites-moi savoir si je peux améliorer quelque chose.

Ajout d'un nouvel élément à un composant d'état fonctionnel:

Définissez les données d'état:

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

Demandez à un bouton de déclencher une fonction pour ajouter un nouvel élément

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

Ce code fonctionne pour moi:

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