使用useState向数组添加对象时状态未更新问题求助

问题描述 #

尝试使用useState钩子向数组中添加对象，但状态无法正常更新。调用setChosenPro后立即打印chosenPro始终为空数组，第二个分支的日志无法触发。

原代码 #

const [chosenPro, setChosenPro] = useState([])

const handleCheck = (e, item, max) => {
    const isChecked = e.target.checked

    // 此处能正确打印item内容
    // {index: 'skill-arcana', name: 'Skill: Arcana', url: '/api/proficiencies/skill-arcana'}
    console.log(item)
    if(isChecked && chosenPro.length === 0){
        setChosenPro([item])
        
        // 此处打印为空数组
        console.log('number 1', chosenPro)
    }
    else if(isChecked && chosenPro.length >= 1) {
        // 此分支日志无法触发，因为数组始终被判定为空
        setChosenPro((prevPro) => [...prevPro, item])
        console.log('number 2', chosenPro)
    }else if(!isChecked){
        
        setChosenPro((prevPro) => prevPro.filter((pro) => pro !== item))
        // 取消勾选时此处也打印空数组
        console.log('number 3', chosenPro)
    }
}

预期状态格式 #

const chosenPro = [
  {
    index: "skill-arcana",
    name: "Skill: Arcana",
    url: "/api/proficiencies/skill-arcana",
  },
  {
    index: "skill-animal-handling",
    name: "Skill: Animal Handling",
    url: "/api/proficiencies/skill-animal-handling",
  },
];

问题分析与解决 #

1. useState更新是异步的，无法立即读取新状态 #

setChosenPro是异步操作，调用后不会立刻更新chosenPro的值，所以你在调用后立即打印的始终是更新前的旧状态。这也是为什么第二个分支永远触发不了——第一次勾选后，chosenPro的旧值还是空数组，下次触发时判断chosenPro.length >=1依然是false。

如果需要查看更新后的状态，应该用useEffect监听chosenPro的变化：

useEffect(() => {
  console.log('更新后的chosenPro:', chosenPro)
}, [chosenPro])

2. 统一使用函数式更新，避免依赖旧状态判断 #

不要依赖当前的chosenPro状态做分支判断，而是统一使用函数式更新（接收prevState参数），这样能确保每次更新都基于最新的状态。

3. 对象引用比较的问题 #

在取消勾选的filter逻辑中，pro !== item是引用比较——即使两个对象内容完全一致，只要是不同的引用就会判定为不等，导致无法正确过滤。应该用对象的唯一标识（比如index）来做比较。

修改后的代码 #

const [chosenPro, setChosenPro] = useState([])

const handleCheck = (e, item, max) => {
    const isChecked = e.target.checked

    if(isChecked){
        // 函数式更新，基于最新的prevPro添加item
        setChosenPro((prevPro) => [...prevPro, item])
    }else{
        // 用index做唯一标识过滤，避免引用比较问题
        setChosenPro((prevPro) => prevPro.filter((pro) => pro.index !== item.index))
    }
}

// 监听状态变化查看更新后的值
useEffect(() => {
  console.log('当前选中的列表:', chosenPro)
}, [chosenPro])

这样修改后，状态更新会基于最新的前一次状态，取消勾选也能正确过滤对象，同时可以通过useEffect查看更新后的状态。

内容的提问来源于stack exchange，提问作者Christopher Dirksen