使用 useState 更新二维数组

Question

我想用 useState 更新我的二维数组。看起来像：

[[null, null, null, null, null], [null, null, null, null, null], [null, null, null, null, null], [null, null, null, null, null], ...n]

您可以将数组想象为行和列。每列具有相同的值 (null).

我想要的是每次调用函数时将我想要的值分配给该二维数组的第一个元素。

（第一次调用）：[[myValue, null, null, null], ...n]
（第二次调用）：[[myValue, myValue, null, null], ...n]
（第三次调用）：[[myValue, myValue, myValue, null], ...n]
（第四次调用）[[myValue, myValue, myValue, myValue], [myValue,null,null,null] ...n]

我尝试了几种方法来做到这一点，但不幸的是没有成功。我将在下面分享代码。最短的方法是什么？

我试过的代码：

  const [data, setData] = useState(
    Array.from({ length: 6 }, (v) => Array.from({ length: 5 }, (v) => null))
  );
      const addFunc = (e) => {
        let value = e.target.value;
    
        // first way
        setData(
          data.map(([...row]) => {
            row.map((col) => {
              if (col === null) {
                return [...row, [...col, value]];
              }
            });
          })
        );
    
        // second way
        setData((val) => {
          for (var i = 0; i < data.length; i++) {
            for (var z = 0; z < data[i].length; z++) {
              if (data[i][z] == null) {
                return [...val, (val[i][z] = value)];
              }
            }
          }
        });
      };

Answer 1

因为听起来您想有效地“迭代”二维数组 data 我建议保留一个“计数”或一些当前的“索引”值，每次更新都会递增。创建一个实用程序函数，将此“计数”转换为要更新的计算“行”和“列”索引。

示例：

const [count, setCount] = useState(0);
const [data, setData] = useState(Array(6).fill(Array(5).fill(null)));

const countToRowCol = (count) => {
  return {
    row: Math.floor(count / 5), // 5 is the inner array length
    col: count % 5
  };
};

const addFunc = () => {
  setData((data) =>
    data.map((row, i) =>
      i === countToRowCol(count).row
        ? row.map((el, j) => (j === countToRowCol(count).col ? myValue : el))
        : row
    )
  );
  setCount((c) => c + 1);
};

addFunc 只是将前一个状态的数组映射到匹配 row/column 索引的新数组引用，否则只是浅拷贝前一个状态。

使用 useState 更新二维数组

Update two dimensional array using useState

javascript

arrays

multidimensional-array

reactjs

react-hooks