ReactJS 更新二维数组中的单个值

Question

我正在尝试更新二维数组的单个值。

请注意： 我提到了以下问题

Difference between let a=[] and new Array

Javascript multidimensional array updating specific element

Javascript : change cell value in 2D array

我正在使用以下代码创建二维数组

export default function(
    numrows = 16,
    numcols = 10,
    initial = { value: 0, color: 'wheat' },
) {
    let arr = new Array(numrows).fill().map(function() {
        return new Array(numcols).fill(initial);
    });
    return arr;
}

---

我使用上面的函数在构造函数中生成初始数组，并在视图中以表格的形式显示。

单击按钮时，我想通过调用updateArray 函数来更新数组的某些值。

我面临的问题是updateArray 函数更新所有 将数组的值改为 "4" 而不是仅更新 _gridArray[1][2].value = 4; 和 _gridArray[0][2].value = 3;

所以，我的问题是，我如何只更新二维数组的特定值？

查看此CodeSandbox link 以获取该应用的演示

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gridArray: arrayBuilder() //calls above function
    };
  }

  renderTable = () => {
    return this.state.gridArray.map((data, i) => {
      return <TableRow key={i} row={data} />;
    });
  };

  updateArray = () => {
    let _gridArray = [...this.state.gridArray];
    _gridArray[0][2].value = 3;
    _gridArray[1][2].value = 4;
    this.setState({ gridArray: _gridArray });
  };

  render() {
    return (
      <Fragment>
        <div>
          <button onClick={this.updateArray}>Update Array</button>
        </div>
        <table>
          <tbody>{this.renderTable()}</tbody>
        </table>
      </Fragment>
    );
  }
}

export default Main;

我也尝试过分离数组生成器函数并尝试过 在项目之外运行它。它正确更新了数组值。尝试 运行代码 sn -p 并检查控制台中的值。

function createAndUpdate(){

//1nd method to create 2d array
  
  let arr = new Array(16).fill().map(function() {
 	  return new Array(10).fill(0);
 	});
 	console.table(arr);
 	let newarr = [...arr];
 	newarr[0][2] = 4;
 	console.table(newarr); //value updated properly

//2nd method to create 2d array

 	let arr2 = []
 	for (let i = 0; i < 16; ++i) {
 	  let columns2 = [];
 	  for (let j = 0; j < 10; ++j) {
 	    columns2[j] = 0;
 	  }
 	  arr2[i] = columns2;
 	}
 	console.table(arr2);
 	let newarr2 = [...arr2];
 	newarr2[0][2] = 3;
 	console.table("Updated table");
 	console.table(newarr2); //value updated properly
  }

<h3>Open console and run this snippet</h3>

<button onClick = "createAndUpdate()">Run</button>

Answer 1

更新数组的代码完全没问题，问题出在arrayBuilder。在您的代码中，它用 initial 值填充数组，该值只是对对象的引用。所以数组最终被填充了相同的值。

我已更改数组构建器以克隆每个表格单元格的初始对象，因此表格可以携带超过 1 个值。应用程序的其余部分对我来说看起来不错。

export default function(
    numrows = 16,
    numcols = 10,
    initial = { value: 0, color: 'wheat' },
) {
    let arr = new Array(numrows).fill().map(function() {
        return new Array(numcols).fill().map(() => {return {...initial}});
    });
    return arr;
}

请查看相关的 SO 问题：Array.prototype.fill() with object passes reference and not new instance