React setState未生效状态被覆盖 记忆卡片点击无反应问题

核心错误点 #

• 状态更新函数调用语法错误
  你在调用setMemoryStatus更新状态时，错误使用了方括号[]而非函数调用的小括号()。方括号是JS中访问对象/数组属性的语法，不会触发React的状态更新逻辑，这是状态未生效的直接原因。

修复方法：把setMemoryStatus[newMemoryStatus]修改为setMemoryStatus(newMemoryStatus)即可。

优化建议 #

为了避免闭包导致获取到旧状态的问题，针对依赖原有状态计算新状态的场景，更推荐使用函数式更新写法，代码也可以更简洁：

const handleChange = (position) => {
    setMemoryStatus(prevStatus => 
        prevStatus.map((item, index) => index === position ? !item : item)
    )
}

另外你声明的allTrue变量全程没有使用，属于冗余代码可以直接删除。

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