复选框保持React JS中组件的状态

Question

我有一个带有复选框的列表，我在活动列表中应用了相同的行为

var campaignsData = [{Name: "First"}, {Name: "Second"}, {Name: "Third"}];

var CampaignsRow = React.createClass({
    getInitialState: function() {
        return {checked: false};
    },
    checkedChange: function (e) {
        this.setState({checked: e.target.checked});
    },
    render: function() {
        console.log(this.props.data.Name, this.state.checked);
        return (
            <div className="row">
                <div className="cell checkbox">
                    <input type="checkbox" checked={this.state.checked} onChange={this.checkedChange}/>
                </div>
                <div className="cell campaignName">{this.props.data.Name}</div>
            </div>
        );
    }
});
var CampaignsTable = React.createClass({
    render: function() {
        var rows = this.props.campaigns.map(function(campaign) {
        return (
            <CampaignsRow data={campaign}/>
        );
    });

    return <div className="table">
        <div className="row header">
            <div className="cell checkbox"><input type="checkbox"/></div>
            <div className="cell campaignName">Name</div>
        </div>
        {rows}
    </div>
  }
});

ReactDOM.render(<CampaignsTable campaigns={campaignsData} /> ,document.getElementById('reactContainer'));

我的问题是，如果我先选中活动中的复选框，然后通过活动data.shift（）（模拟从服务器下载新数据）删除第一项，然后再次渲染，则选中第二个活动中的复选框。

当它不附加到实例时，this.state的目的是什么。渲染工作正常，因为在控制台中打印的第二个真，所以this.state.checked被从第一运动移动到第二运动。

Answer 1

您应该向多个组件添加唯一的键属性，以便React可以跟踪标识：

var rows = this.props.campaigns.map(function(campaign) {
    return (
        <CampaignsRow key={campaign.name} data={campaign}/>
    );
});