为什么 ReactJS 中的 UseState 会阻止布尔值更新？

Question

所以我有一个代码，用于重新排列按名称打印在 table 上的用户列表。当我只是简单地 console.log() 排列的数组时，它工作得很好。一旦我引入 useState，它就会更新一次。

所以这是原始的工作代码

 import React from 'react'
import { useState } from 'react'


export const Table = () => {

 
 // ///////////////////UseState Array //
 let asc = true
 var newArr
 const [Array2,SetArray] = useState([
     {rank:1,name:'Sam', age:25, gender:true},
     {rank:2,name:'Bill', age:35, gender:true},
     {rank:3,name:'John', age:22, gender:true},
     {rank:4,name:'Sarah', age:19, gender:false}]
 )
 const Alpha2 = ()=>{
    console.log(asc)


if (asc===true){
     newArr = [...Array2].sort((a,b) => (a.name> b.name) ? 1 : ((b.name > a.name) ? -1 : 0))
    asc = false 

    console.log('cond 1')
  
    }
   
else if(asc=== false ){
     newArr = [...Array2].sort((a,b) => (b.name> a.name) ? 1 : ((a.name > b.name) ? -1 : 0))
     asc = true 
     console.log('cond 2')
    
}
console.log(newArr)



}


//                  
    return (
        <div className="Table">
              
            </div>
             <h3>Table 2</h3>
             <div className="Standings">
<div className="column">
                <div> <h3>Rank</h3></div>
               <div onClick= {()=>Alpha2()}> <h3 >Name</h3></div>
                <div> <h3 onClick= {()=>Numa()}>Age</h3></div>
                <div> <h3>Gender</h3></div>
</div>
            {Array2.map((profile)=>(
            <div key={profile.rank} className="column">
                 <div> <h3>{profile.rank}</h3></div>
                <div> <h3>{profile.name}</h3></div>
                <div> <h3>{profile.age}</h3></div>
                <div> <h3>{profile.gender?'male': 'female'}</h3></div>
                 
                                          
            </div>
        
     ))}

             </div>
        </div>
    )
}


export default Table

它在奇数次点击后将控制台记录为

: {rank: 2, name: 'Bill', age: 35, gender: true}
1: {rank: 3, name: 'John', age: 22, gender: true}
2: {rank: 1, name: 'Sam', age: 25, gender: true}
3: {rank: 4, name: 'Sarah', age: 19, gender: false}

在偶数次点击后为

0: {rank: 4, name: 'Sarah', age: 19, gender: false}
1: {rank: 1, name: 'Sam', age: 25, gender: true}
2: {rank: 3, name: 'John', age: 22, gender: true}
3: {rank: 2, name: 'Bill', age: 35, gender: true}

这是我想要的，因为它每次都按字母顺序重新排列（一次按降序排列，另一次按升序排列）。 asc 变量一直在 true 和 false 之间轮换

但是当我通过像这样修改 Alpha2 函数来使用 useState 函数 SetArray 时

 const Alpha2 = ()=>{
    console.log(asc)


if (asc===true){
     newArr = [...Array2].sort((a,b) => (a.name> b.name) ? 1 : ((b.name > a.name) ? -1 : 0))
    asc = false 

    console.log('cond 1')
  
    }
   
else if(asc=== false ){
     newArr = [...Array2].sort((a,b) => (b.name> a.name) ? 1 : ((a.name > b.name) ? -1 : 0))
     asc = true 
     console.log('cond 2')
    
}
SetArray(newArr)

console.log(newArr)



}

只把数组改成

一次

rank: 2, name: 'Bill', age: 35, gender: true}
1: {rank: 3, name: 'John', age: 22, gender: true}
2: {rank: 1, name: 'Sam', age: 25, gender: true}
3: {rank: 4, name: 'Sarah', age: 19, gender: false}

但它之后保持不变，因为 asc 变量永远不会像在早期版本的函数中那样从 false 变回 true

所以这是怎么回事？我做错了什么？

Answer 1

发生这种情况的原因是 useState 重新呈现页面，而只是将变量 'asc' 从 true 更改为 false 不会。

基本上，无论何时调用 useState，它都会刷新页面，并在这样做时将任何硬编码变量重置回其原始值。

更改此设置的唯一方法是像这样为 'asc' 变量使用挂钩

 const [asc, setAsc] = useState(true)

然后改成

setAsc(false)

应该可以解决问题。

为什么 ReactJS 中的 UseState 会阻止布尔值更新？

Why is UseState in ReactJS preventing a boolean from updating?

reactjs

react-hooks

use-state