setState 仅在 React js 中首次使用

Question

点击交叉时它会变为零，因为我们设置了状态，但这是如何变化的 反映到全局 arr 这就是为什么它不会第二次重置的原因。它也不是第一次重置，而是为了显示效果我添加了 arr2

所以我想这可能是由于 let arr 所以我将其更改为 cosnt arr 但仍然无法正常工作。 所以我添加了一个新的 arr2 const 来测试，但它只在第一次工作

const cross = "http://clipart-library.com/data_images/49124.png"
const zero  = "http://clipart-library.com/data_images/367486.png"

const arr = [[cross,cross,cross],
             [cross,cross,cross],
             [cross,cross,cross]]

const arr2 = [[cross,cross,cross],
             [cross,cross,cross],
             [cross,cross,cross]]


class ResetButton extends React.Component{
    constructor(props){
        super(props)
        this.reset = this.reset.bind(this)
    }

reset(){
    
    this.props.reset()
}

render(){

    return <div>
           <h>Reset all img to cross  </h>
      <button onClick={this.reset}>{"RESET"} </button>
           </div>
}

}





class Box extends React.Component{

    constructor(props){
        super(props)

        this.changeImage = this.changeImage.bind(this)
    }

    changeImage(r,c){
      this.props.changeImage(r,c)
    }

    render(){
        let row     = this.props.row
        let column  = this.props.column
        return <img src = {this.props.src} height={25} width={25} onClick={()=>this.changeImage(row,column)} />
    }
}


class BoxColumn extends React.Component{

    constructor(props){
        super(props)
        this.changeImage = this.changeImage.bind(this)
    }

    changeImage(r,c){
        this.props.changeImage(r,c)
    }

    render(){
       let row = this.props.row
        return <div>
            {this.props.src.map((i,j)=><Box src={i} row={row} column={j}  changeImage={this.changeImage} key={j}/>) }
               </div>
    }
}
    

class BoxRow extends React.Component{

    constructor(props){
        super(props)
        this.state = {src :arr}
        this.changeImage = this.changeImage.bind(this)
        this.reset  = this.reset.bind(this)
    }

    reset(){
        
        this.setState({src:arr2})
        
    }
    
    changeImage(r,c){
       //console.log(r,c)
        let srcArr = [...this.state.src]
        srcArr[r][c] = zero
        this.setState({src:srcArr})
    }

    render(){

        return <div>
             
          <p>Click on image to change cross image to zero</p>
            {this.state.src.map((i,j)=><BoxColumn src={i} row={j} changeImage={this.changeImage} key={j}/>) }
          <ResetButton reset={this.reset}/>
             </div>
    }
}

ReactDOM.render(<BoxRow />,
document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>


<div id="root"> </div>

Answer 1

只用 arr 就可以了。无需介绍arr2。发生了什么...当您通过单击鼠标更改值 arr 时，它会将您的更改设置为原始 arr，因此在设置状态后，setState 设置 arr 已经改变了。我所做的是，在使用 setState 之前，我用 cross 重置了 arr 的每个索引。只需将 BoxRow 组件中的 changeType 函数替换为以下函数即可。

changeType(selectedType) {
        for (let i = 0; i < 3; i++)
            for (let j = 0; j < 3; j++)
                arr[i][j] = cross;

        this.setState({src: arr, type: selectedType})
    }