更新二维数组矩阵的状态后，useEffect 不会重新运行

Question

我有一个带有数组初始值的useState ，并且我有一个更改数组的算法。

我console.log编辑了matrix ，它发生了变化，但是连接到它的useEffect依赖于useState的matrix ，不会像我需要的那样更新我的组件。

当我开始在 VS Code 中输入时，它只会更改并重新呈现。

我试图将setMatrix从useState切换过来，但它没有用。

import React, {MouseEvent, useEffect, useState} from 'react'

const TwoDArray = () => {
 let twodarray:number[][] =  [
    [1,1,1,1],
    [1,0,1,1],
    [1,1,0,1],
    [0,0,0,1]
    ] 
  const [matrix, setMatrix] = useState(twodarray)
  
  const setMatrixZeros = (matrix: number[][], ) => { 
    let col0: number = 1, rows: number = matrix.length, cols = matrix[0].length
    
    for (let i: number = 0; i < rows; i++) {
      if (matrix[i][0] == 0) col0 = 0
      for (let j: number = 1; j < cols; j++) 
        if(matrix[i][j]==0) matrix[i][0] = matrix[0][j] = 0
    }
    
    for (let i: number = rows - 1; i >= 0; i--) { 
      for (let j: number = cols - 1; j >= 1; j--) {
        if (matrix[i][0] == 0 || matrix[0][j] == 0) matrix[i][j] = 0
      }
      if(col0==0) matrix[i][0] = 0 
    }
  }

  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
    setMatrixZeros(matrix)
      
  }  
   
  useEffect(() => {
  }, [matrix]); // Only re-run the effect if matrix changes
  
console.log(matrix)
  return (
    <div className="twodarray">
      <div className="matrix">
        {    matrix.map((item, index) => { 
          return <div key={index} className='box-container'>
            {item.map((i, idx) =>
              <input type='text' key={idx} className='box' value={ i} readOnly/>)}</div>
    })}
      </div>
      <button onClick={handleClick }>Set Matrix Zeroes</button>
    </div>
  ) 
}

export default TwoDArray

Answer 1

React 不跟踪深层状态突变（例如与 Vue 3 不同）。

您必须使用setMatrix设置状态操作显式更改状态 + 确保新状态是不同的引用，例如使用浅克隆（通常使用展开运算符）：

const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
  setMatrixZeros(matrix)
  // Create a new reference
  const newMatrix = [...matrix]
  // Make sure to use the setter
  setMatrix(newMatrix)
}

如果没有新的引用，依赖数组将看不到状态变化， useEffect也不会重新运行。

Answer 2

据我了解，最大的问题是代码直接修改状态，例如： matrix[i][0] = matrix[0][j] ，而不是使用setMatrix(newMatrix) 。

如果您使用已经修改的矩阵调用setMatrix(Matrix) （正如我猜您在切换到useEffect之前所做的那样），它不会注意到更改并且不会重新呈现页面。

下面是您的代码的一个有效的修改版本，它只是交换了 1 和 0 的位置。 我真的不明白你的setMatrixZeroes()应该做什么，所以我将名称更改为 changeMatrix changeMatrix() ，以免将它与状态设置功能混淆，你可以修改它以适应你的功能'再之后。

const TwoDArray = () => {
  let initMatrix:number[][] = [
    [1,1,1,1],
    [1,0,1,1],
    [1,1,0,1],
    [0,0,0,1]
  ]
  const [matrix, setMatrix] = useState(initMatrix)

  const changeMatrix = () => {
    const newMatrix:number[][] = []

    for(let row of matrix){
      let newRow:number[] = []
      for(let number of row){
        number === 0
          ? newRow.push(1)
          : newRow.push(0)
      }
      newMatrix.push(newRow)
    }
    setMatrix(newMatrix)
  }

  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
    changeMatrix()
  }

  return(
   // ... tsx-code ... //
  )
}