Question

我正在尝试更新2D数组的单个值。

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

Difference between let a=[] and new Array

Javascript multidimensional array updating specific element

Javascript : change cell value in 2D array

我使用以下代码创建2D数组

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;

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

检查此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;

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

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值填充数组，该值仅是对象的引用。因此，数组最终基本上填充了相同的值。

我已经更改了数组构建器以克隆每个表格单元格的初始对象，因此该表格可以包含多个值。该应用程序的其余部分对我来说很好。

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

ReactJS更新2D数组

1 个答案: