重复的组件，最后的组件声明保存所有组件

Question

我目前正在创建一个项目，该项目将一个列表随机化，并使用一个有趣的老虎机将它们分组。我使用js和jquery都能正常工作，但是正在尝试使用React重新创建它。

Slot组件从多少个组中渲染出来。它可以正确显示在屏幕上，但是问题是当我setState更改列表时，最后一个渲染的Slot组件的状态会覆盖所有其他状态。

我试图在给出的代码中使用循环，超时。变量newNames会按照我想要的顺序随机列出所有名称，但是当我保存状态时，最后一个总是会覆盖前一个。

父容器

class Slots extends Component {
    constructor(props){
        super(props);
        var matches = [];
        for (var i = 0; i < this.props.groups[0].length; i++) {
            matches.push(false);
        }
        this.state = {
            spinning: false,
            names: this.props.originalNames,
            groups: this.props.groups,
            currentSpin: 0,
            matched: matches
        }
        this.startSpin = this.startSpin.bind(this);
        this.stopSpin = this.stopSpin.bind(this);
        this.handleMatch = this.handleMatch.bind(this);
    }

    startSpin(){
        this.setState({
            spinning: true
        })
    }

    stopSpin(){
        this.setState({
            spinning: false
        });
    }


    render() {
        const {spinning} = this.state;
        let button;
        if(spinning){
            button = <button id="stopSpin" type="button" className="btn btn-stop" onClick={this.stopSpin}>Stop</button>;
        } else {
            button = <button id="startGroup" type="button" className="btn btn-start" onClick={this.startSpin}>Make Group</button>;
        }
        return (
            <div className="">
                <div id="slotContainer">
                    {
                        this.props.groups.map((group, i) => {
                            return <div key={i} className="slot">
                                <Slot
                                    slotNumber={i + 1}
                                    names={this.state.names}
                                    spinning={this.state.spinning}
                                    winningName={this.state.groups[this.state.currentSpin][i]}
                                    matched={false}
                                />
                            </div>
                        })
                    }
                </div>
                { button }
            </div>
        );
    }
}

子容器

class Slot extends Component{
    constructor(props){
        super(props);
        this.state = {
            slotNumber: this.props.slotNumber,
            winningNameNeeded: this.props.winningName,
            names: [],
            spinning: false
        }
    }

    componentDidMount() {

        setTimeout(() => {
            let newNames = this.randomize(this.props.names);
            console.log(newNames);
            this.setState({
                names: newNames,
            }, () => {
                console.log(this.state);
            });
        }, 1000 * this.props.slotNumber);
        console.log("mount");
    }

    randomize(array){
        var currentIndex = array.length;
        var temporaryValue, randomIndex;
        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
        return array;
    }

    render(){
        return(
            <ul>
                {
                    this.state.names.map((name, i) => {
                        let className;
                        if(i%2 === 0){
                            className = "secondItem";
                        } else {
                            className = "";
                        }
                        return <li
                            key={i}
                            className={className}
                                >{name}
                            </li>
                    })
                }
            </ul>
        )
    }
}

链接到下面的完整github项目

https://github.com/RichardHpa/group-randomizer-react