javascript - 在 react 中更新一个状态时更新多个集合

Question

我是 react 新手，我正在研究 react 状态和组件。我制作了这个小应用程序，它从用户那里获取数组元素并随机更改其元素的位置。但是当我改变一种状态时，另一种状态也会随之改变。我有一个称为元素数组的状态，其中包含数字数组，另一个称为绘制的数组将包含元素数组中元素位置随机移动的元素。问题是当绘制 [] 更改时，元素 [] 也会更改。 我不想改变 element[]。我只希望 draw[] 包含 element[] 数组中的元素以及数组中的新位置。

当我单击绘制按钮时，它会生成具有随机定位元素的数组，但它也会更改包含元素原始位置的元素数组中元素的位置。我不知道更新绘制数组时元素数组如何变化

const dom=document.getElementById("fn")
class Final extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={
            element:[],
            draw: []
           
        }
        this.addElement=this.addElement.bind(this)
        this.drawer = this.drawer.bind(this)
    }
    drawer() {

        // shifting logic Fisher–Yates_shuffle
        var n = this.state.element.length
        var t=this.state.element
        var temp;
        while (n !== 0) {
            var rand = Math.floor(Math.random() * Math.floor(n))
            n--;
            temp = t[n]
            t[n] = t[rand]
            t[rand] = temp
        }
       this.setState( (prev)=> {
          
                return {draw:t} //update one state
         
       })
        
    }
    addElement(element)
    {
       if(!element)
       {
            return "ADD SOMETHING!"
       }
       else if(this.state.element.indexOf(element)>-1)
       {
        return "value Already Exists!"
       }
        this.setState((prev)=>{
            element=prev.element.concat(element) 
            return {element}
        })
    }
    render()
    {
        return(
            <div>
       
           < AddElement element = {
               this.state.element
           }
           addElement = {
               this.addElement
           }
           drawer = {
               this.drawer
           }
           />
           < Drawer draw={
               this.state.draw
            }
            />
           </div>
        )
    }
}

class AddElement extends React.Component{
    constructor(props)
    {
        super(props);
        this.add=this.add.bind(this)
        this.drawIt = this.drawIt.bind(this)
        this.state={
            error:undefined
        }
    }
    add(e)
    {
        e.preventDefault();
        const element=e.target.elements.element.value
        const v=this.props.addElement(element);
       
        this.setState(()=>{return {error:v}})
        
    }
    drawIt()
    {
        
        this.props.drawer() //calls drawer function in Final componet
        
    }
    
    render()
    {
        return(
            <div>
            <form onSubmit={this.add}>
                <input type="text" name="element" placeholder="add element here"/>
                <button>Add elements</button>
                {this.state.error && <p>{this.state.error}</p>}
                </form>
                <button onClick={this.drawIt}>DRAW IT</button>
                <p> elements inside Element array</p>
                <ul>
                    {this.props.element.map((x)=>{return <Element key={x} v={x}/>})}
                </ul>
                
            </div>
        )
    }
}


class Drawer extends React.Component{
    render()
    {
        return(
            <div>
            { this.props.draw.length > 0 &&  <p>new randomly generated position of elements </p>}
                <ul> 
                    {this.props.draw.map((x) => { return <Element key={x} v={x} /> })}
                </ul>
            </div>
        )
    }
}
class Element extends React.Component {
    render() {
        return (
            <li>{this.props.v}</li>
        )
    }
}

ReactDOM.render(<Final/>,dom)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="fn"></div>

Answer 1

这是因为您正在改变状态数组，您可以在 drawer 方法中克隆或使用解构赋值:

错误

var t = this.state.element;

右

var t = [...this.state.element];

您还可以看到它正在运行 here .