React setState Updates Requisiten

Question

Ich arbeite an einer Komponente, die mehrere Unterkomponenten enthält, die ausgewählt werden können (oder "aktiviert", wie die Bezeichnung hier sagt.). Ich habe ein Array von IDs, die mit allen IDs initialisiert werden sollten, so dass sich this.state.activeSensors auf die Gesamtliste der Sensoren bezieht: this.props.mainViewSensors. Die Funktionen sensorSelect erhalten die ID und sollten damit feststellen können, ob sie ausgewählt ist oder nicht. Mein Ansatz war zu überprüfen, ob es in der ActiveSensors-Liste ist - Entfernen Sie es, wenn es da ist, fügen Sie es hinzu, wenn es nicht ist. Legen Sie den neuen Status fest.

Wenn ich ein Element aus der neuen Liste newActiveSensors lösche und den setState aufruft, verschwindet das angeklickte Element irgendwie aus den Requisiten. Ich wusste nicht, dass das möglich ist. Ist es etwas, was ich falsch gemacht habe? Hier

ist das, was ich getan habe:

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

Nur um klarzustellen, ich mache so etwas, wo der grüne Pfeil zeigen, die man gewählt ist (hier habe ich manuell den aktiven Zustand geändert in Kindkomponente):

Answer 1

Dies ist eigentlich kein React-Problem, verwenden Sie nur die gleiche Instanz des Arrays über Ihre Klasse. Sie müssen make a new array, um eine Kopie davon zu verwenden.

Siehe mein Beispiel zur Verdeutlichung:

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