为什么一个函数可以正确更新 UseState 而另一个函数却不能？

Question

const [filters, setFilters] = useState([false,false,false,false,false,false,false,false]);

以下函数将导致警报显示更新后的使用状态，但底部的 div 不会有新状态。

const onSetFilters = (e) => {
 let ID = e.target.getAttribute("value");
 let filtz = filters;
 if(filtz[ID]){
  filtz[ID] = false
 }else{
  filtz[ID] = true
 }
 setFilters(filtz)
 alert(filters.toString())
}

以下功能正常工作。

const selectAllFilters = (e) => {
  let filtz = []
  if(filters.every(filter => filter === true)){ // see if all are true
    filtz = Array(filters.length).fill(false)
  }else{
   filtz = Array(filters.length).fill(true)
  }
  setFilters(filtz)
}

return(
 <div>
  filters: {filters.toString()}
 </div>
)}

帮助修复和理解将不胜感激。此外，当我在使用 onSetFilters() 后更新 useState 的另一部分时，过滤器部分也会更新。

Answer 1

状态更新永远不会立即反映出来。您没有在 onSetFilters() 中制作任何状态副本。您在这里直接改变状态，因此您会看到值发生变化。

const onSetFilters = (e) => {
 let ID = e.target.getAttribute("value");
 let filtz = filters; //filtz is not a copy of filters, it points to the same array
 //let filtz = [...filters]; //making a copy here. Uncomment this and you will see that state is not updated.
 
if(filtz[ID]){
  filtz[ID] = false //mutating state
 }else{
  filtz[ID] = true //mutating state
 }
 setFilters(filtz)
 alert(filters.toString())
}

你上面的代码只是改变状态变量而不是更新状态。

要做出反应以检测状态更新，必须更改引用。这对像数组这样的非原始值起作用。上面的传播运算符将解决您的状态不更新的问题，因为它将制作数组的副本，因此是一个新的引用。

为什么一个函数可以正确更新 UseState 而另一个函数却不能？

Why does one function update UseState correctly but the other one doesn't?

reactjs

use-state