1
votes

la réinitialisation de la matrice dans react ne revient pas à son état d'origine

Après avoir inséré des éléments dans le tableau, lorsque je réinitialise, il ne va pas à l'initialStateOfList qui est à [1,2,3,4,5].

Par exemple, si j'insère 6 et 7, puis appuie sur le bouton d'effacement puis de réinitialisation, cela passe à [1,2,3,4,5,6,7] et non à [1,2,3,4 , 5].

Que dois-je faire pour le ramener à son état d'origine?

import React , {Component} from 'react';
import {render} from 'react-dom';

const initialStateOfList = [1,2,3,4,5];

class Form extends Component{

   state = {
    tempo : '',
    list : initialStateOfList
  };

  clearArray=()=>{
    this.setState({list:[]});
  }

  resetArray=()=>{
    this.setState({list:initialStateOfList});
  }

  tempAdd=(event)=>{
    this.setState({tempo:event.target.value});
  }

  addItem=(event)=>{
    event.preventDefault();
    this.state.list.push(this.state.tempo);
    this.setState({tempo:''});

  }

  render(){

    const listitem = this.state.list.map((number) =>  <li>{number}</li>);


    return(
      <div>
        <form ref="form" id="getInput" onSubmit={this.addItem}>
          {this.state.list.map((listItem)=><li>{listItem}</li>)}
          <input type="text" ref="formText" id="adder" onBlur={this.tempAdd} />
          <input type="submit" ref="formSubmit" id="passer" />
          <button id="clear" onClick={this.clearArray}>clear</button>
          <button id="reset" onClick={this.resetArray}>reset</button>

        </form>
      </div>
    );
  };
}

export default Form;

reactjs arrays

2 commentaires

Le tableau est muté dans votre cas. Vous pouvez essayer de copier le tableau en le définissant comme dans le constructeur comme state = {tempo: '', list: [... initialStateOfList]};

De plus, vous ne devriez jamais muter comme dans `this.state.list.push (this.state.tempo);` Créez toujours une nouvelle variable et copiez le tableau là-bas et définissez-le sur state. comme `const newList = [... this.state.list]; newList.push (this.state.tempo); this.setState ({list: newList, tempo: ''}) `

4 Réponses :

0
votes

Je pense que vous vous trompez ici avec le mot-clé const. Comme les tableaux en javascript sont des références, vous mutez l'état.

Lorsque vous déclarez const initialStateOfList avec array, vous pourrez librement ajouter des variables à cette variable. «const» signifie ici qu'une fois déclaré, vous ne pouvez pas réassigner cette variable. Mais à l'intérieur du tableau, les éléments peuvent être modifiés.

par exemple

const arr1 = [1,2,3];
arr1.push(4); // Possible. No Error
arr1 = [1,2,3,4]; // Not possible.

Donc, à chaque fois que vous devez créer un nouveau tableau et ne pas muter la référence du tableau d'origine.

0 commentaires

0
votes

La raison est que vous modifiez la liste dans un état qui n'est pas autorisé dans react,

import React , {Component} from 'react';
import {render} from 'react-dom';

const initialStateOfList = [1,2,3,4,5];

class Form extends Component{

    state = {
        tempo : '',
        list : initialStateOfList
    };

    clearArray=()=>{
        this.setState({list:[]});
    }

    resetArray=()=>{
        this.setState({list:initialStateOfList});
    }

    tempAdd=(event)=>{
        this.setState({tempo:event.target.value});
    }

    //Read comment 
    addItem=(event)=>{
        event.preventDefault();
        // here you are mutating list in state, never do this in react instead you can use spread operator to create new array
        //this.state.list.push(this.state.tempo);
        const newList = [...this.state.list, this.state.tempo]
        this.setState({tempo:'', list: newList});
    }

    render(){
        const listitem = this.state.list.map((number) =>  <li>{number}</li>);

        return(
            <div>
                <form ref="form" id="getInput" onSubmit={this.addItem}>
                    {this.state.list.map((listItem)=><li>{listItem}</li>)}
                    <input type="text" ref="formText" id="adder" onBlur={this.tempAdd} />
                    <input type="submit" ref="formSubmit" id="passer" />
                    <button id="clear" onClick={this.clearArray}>clear</button>
                    <button id="reset" onClick={this.resetArray}>reset</button>

                </form>
            </div>
        );
    };
}

0 commentaires

0
votes

Vous avez muté directement initialStateOfList avec push à

const { list, tempo } = this.state // Should use Object destructuring for clean code

const newList  = Object.assign({}, list)  // Object.assign
const newList1 = [...list]                // Spread syntax
const newList2 = _.clone(list)            // `lodash` library

newList.push(tempo)
this.setState({list: newList, tempo: ''})

Cela cause le problème. Vous devez cloner le tableau avant de muter.

Il existe de nombreuses façons de cloner un objet (Array est un type d'objet) pour éviter de muter directement.

this.state.list.push(this.state.tempo)

0 commentaires

0
votes

Vous pouvez essayer de réinitialiser à l'état d'origine à l'aide d'une fonction de réinitialisation personnalisée:

import React, { Component } from 'react';

const getDefaultState = () => ({
  myArray: [1,2,3],
});

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { ...getDefaultState() };
  }

  componentDidMount() {
    this.setState({ myArray: [4,5,6] })
  }

  resetState = () => {
    this.setState({ ...getDefaultState() });
  };

  render() {
    return (
      <div onClick={this.resetState}>
        {JSON.stringify(this.state.myArray)}
      </div>
    );
  }
}

0 commentaires