主页 / 问题 / 820867
Accepted
Igor
Asked:2020-04-29 03:45:03 +0000 UTC2020-04-29 03:45:03 +0000 UTC

为什么将值分配给数组的所有“行”

  • 772

当我单击一个元素时，我希望该元素上出现一个十字。但是十字架出现在所有的线上。在控制台中我显示了函数来的坐标，可以看出它们是正确的。

为什么会发生这种情况以及如何解决？

class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            data: Array(5).fill(Array(5).fill('О')),
        };
    }

    onClick = (i, j) => {
        return () => {
            let data = this.state.data;
            console.clear();
            console.log(i, j);
            
            data[i][j] = 'X';
            this.setState({data});

        }
    };


    render() {
        return (
            <div className="field">
                {this.state.data.map((item, i) => (
                   <div key={`row-${i}`} className="field__row">
                      {item.map((item, j) => <div key={`cell-${j}`} onClick={this.onClick(i, j)} className="field__cell">{item}</div>)}
                   </div>
                ))}
           </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
.field {
    font-size: 0;
}

.field__cell {
    position: relative;
    display: table-cell;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    vertical-align: middle;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
<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="root"></div>

reactjs

1 个回答

  1. Best Answer

    为什么会这样

    您的外部数组将相同的一维数组添加了五次：

    var data = Array(5).fill(Array(5).fill('О'));
data[4][1] = "X";
console.log(data[0][1], data[1][1], data[2][1], data[3][1], data[4][1]);

    以及如何解决它

    这是正确的：

    var data = (function(){ 
  var result = Array(5).fill({});
  result.forEach((item, ind, arr) => arr[ind] = Array(5).fill('О'));
  return result;
})();
data[4][1] = "X";
console.log(data[0][1], data[1][1], data[2][1], data[3][1], data[4][1]);

    冷静，只是冷静。试着理解我回答的第一句话。这是您需要在代码中更改的内容：

    this.state = {
  data: (function(){ 
    var result = [];
    for(var i = 0; i < 5; i++)
      result[i] = Array(5).fill('О');
    return result;
  })()
};
    • 2

相关问题