反应setState更新道具

Question

我正在开发一个包含多个可以选择（或“激活”）的子组件的组件，如此处的命名所述。 我有一个ID数组，应使用所有ID进行初始化，因此this.state.activeSensors指的是传感器的总列表： this.props.mainViewSensors 。 功能sensorSelect获取ID，并且由此可以确定是否已选择ID。 我的方法是检查它是否在activeSensors列表中-如果存在则将其删除，否则将其添加。 设置新状态。

当我从新列表newActiveSensors删除一个项目并调用setState时，单击的项目也会以某种方式从道具中消失。 我不知道这是可能的。 我做错了什么吗？

这是我所做的：

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

为了清楚起见，我正在做类似的事情，其中​​绿色箭头显示了选中的那个（在这里，我手动更改了子组件中的活动状态）：

Answer 1

实际上这不是一个React问题，您只是在类上使用了相同的数组实例。 您必须制作一个新数组才能使用它的副本。

请参阅我的示例以进行澄清：

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