react.js - react set函数修改二维数组状态问题?

Question

react set函数修改二维数组状态问题

const [rangIds,setRangIds]= useState([] as any[])const rangChange = (values:any,indA:number,indB:number)=>{  console.log(values)  console.log(rangIds)  let arr = [...rangIds]  arr[ind]=[...values]  console.log(arr) setRangIds([...arrs]) console.log(rangIds)}

一直到arr都是符合预期的,但是setRangIds执行后,每次打印rangIds都没有变化

Answer 1

作用域链原理所致，setRangIds函数体与 rangIds 不在同一个作用域，所以调用 setRangIds 是不可能给这个作用域里的rangIds重新赋值的。

注意是“重新赋值”，而不是“修改其属性”，这两者是不一样的：

let a = {p: 100};a = {p: 120};

��这种是“重新赋值”；

let a = {p: 100};a.p = 120;

��这种是“修改其属性”。

更不要说rangIds还是一个以const关键字声明的常量，JS 中常量是不允许重复新赋值的。

楼上说的延迟执行并不是主因，例如下面的代码，使用 setTimeout 消除了延迟执行的影响，但打印的仍会是修改前的：

  console.log(arr);  setRangIds([...arrs]);  setTimeout(() => {    console.log(rangIds);  }, 1000);

Answer 2

在 React 中使用 useState 时，调用状态更新函数 setXxx 并不会立即使状态值 xxx 更新，而是会将更新操作加入到 React 的更新队列中。这是因为 React 会对多个状态更新进行批处理，然后一次性地触发重新渲染。

因此，如果你在调用 setXxx 后立即访问状态值 xxx，获取到的是更新之前的旧值，而不是最新的值。

你把 console.log(rangIds)放在 rangChange函数外面打印。 set后组件重新执行 打印的rangIds就是最新的值了