Réagir setState met à jour les accessoires

Question

Je travaille sur un composant qui comprend plusieurs sous-composants qui peuvent être sélectionnés (ou 'activés', comme l'indique le nom ici). J'ai un tableau d'ID qui doit être initialisé avec tous les identifiants étant sélectionnés, donc this.state.activeSensors se réfère à la liste totale des capteurs: this.props.mainViewSensors. Les fonctions sensorSelect obtiennent l'ID, et devraient par ce moyen être en mesure de déterminer si elle est sélectionnée ou non. Mon approche a été de vérifier si elle est dans la liste activeSensors - Retirez-la si elle est là, ajoutez-la si elle ne l'est pas. Définissez le nouvel état.

Lorsque je supprime un élément de la nouvelle liste newActiveSensors et que j'appelle setState, l'élément cliqué disparaît également des accessoires. Je ne savais pas que c'était possible. Est-ce quelque chose que j'ai mal fait?

Voici ce que je faisais:

const propTypes = { 
    mainViewSensors: PropTypes.arrayOf(PropTypes.string), 
}; 

const defaultProps = { 
    mainViewSensors: [ 
     '21EL', 
     '05LO', 
     '08HT', 
     '81EL', 
     '05TF', 
    ], 
} 

class Multiselect extends React.Component { 
    constructor(props) { 
     super(props); 
     this.sensorSelect = this.sensorSelect.bind(this); 
     this.state = { 
      activeSensors: this.props.mainViewSensors, 
      selectedSensors: this.props.mainViewSensors, 
     }; 
    } 

    sensorSelect(sensor) { 
    const newActiveSensors = this.state.activeSensors; 
    if (newActiveSensors.includes(sensor)) { 
     const index = newActiveSensors.indexOf(sensor); 
     newActiveSensors.splice(index, 1); 
    } else { 
     newActiveSensors.push(sensor); 
    } 
    this.setState({ 
     activeSensors: newActiveSensors, 
    }); 
    } 

    render() { 
    const { selectedSensors, activeSensors } = this.state; 

    return (
    <div className="wrapper"> 
     {this.state.selectedSensors.map((tag) => (
      <div key={tag} role="button" className="main-gauge-holder" onClick={this.sensorSelect(tag)}> 
       <MainGauge tag={tag} /> 
      </div> 
     ))} 
    </div> 
    ); 
    } 
} 

Multiselect.propTypes = propTypes; 
Multiselect.defaultProps = defaultProps; 

React.render(<Multiselect />, document.getElementById('container')); 

Juste pour préciser, je fais quelque chose comme ça, où le spectacle de flèche verte que l'on est sélectionné (ici j'ai changé manuellement l'état actif dans composant enfant):

Answer 1

Ceci n'est en fait pas un problème React, vous utilisez simplement la même instance du tableau sur votre classe. Vous devez make a new array pour utiliser une copie.

Voir mon exemple des éclaircissements:

var primaryArray = [1, 2, 3]; 
 

 
console.log('Init :'); 
 
console.log(primaryArray); 
 

 
var obj = { 
 
    array: primaryArray, // Same instance 
 
    clonedArray: primaryArray.slice() // Clone 
 
}; 
 

 
console.log(obj); 
 

 
console.log('Poping from the same instance :'); 
 
obj.array.pop(); 
 

 
console.log(obj); 
 
console.log(primaryArray); 
 

 
console.log('Poping from the cloned array doesn\'t affect primary one :'); 
 
obj.clonedArray.pop(); 
 

 
console.log(obj); 
 
console.log(primaryArray);