【问题标题】：setState returns undefinedsetState 返回未定义
【发布时间】：2021-09-06 18:39:41
【问题描述】：

我不知道这是否正确，但我用我的useState 做到了有多个状态，但现在我得到了未定义而不是在真假之间切换。我该如何解决这个问题

let [Click,setClick] = useState({button1:false,button2:false})

const changeItem = () =>{
setClick(!Click.button1)
console.log(Click.button1)
}

此函数应用于 Button 组件的 onclick 事件首先我得到false 然后undefined

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

发生了什么

初始状态为：

{button1:false,button2:false}

然后（通过changeItem）调用setClick(!Click.button1)，它会设置一个新状态（false，因为!any_object 是false）。

然后你调用console.log(Click.button1) 记录false，因为初始状态的button1 属性是false。

然后触发重新渲染，创建包含新状态的新 Click 变量和关闭新 Click 变量的新 changeItem 函数。

下次您再次致电changeItem 时：

setClick(!Click.button1)

Click 是false 所以Click.button1 是undefined 所以你将状态设置为true。

然后console.log(Click.button1) 记录先前关闭的Click 的（false）button1 属性，即undefined，因为布尔值没有这些属性。

如何更新状态中对象的属性

您需要将一个新的对象分配给您只更改您关心的值的状态：

setState({
    ...Click, // Shallow copy all the old values
    button1: !Click.button1, // Change the one you care about
})

如何观察变化

使用useEffect 钩子记录状态变化时的值：

useEffect( () => { console.log(Click); }, [Click] )

关于风格的说明

按照惯例，以大写字母开头的变量名是为构造函数和类保留的。不要使用它们来存储数据。叫它click。

【讨论】：

【解决方案2】：

React 中的状态更新不会立即反映。

您可以在此处阅读更多信息： useState set method not reflecting change immediately

此外，使用 useState 挂钩，更新不会合并，因此您必须更新完整的对象

您可以使用回调方法来更新状态，如下所示

let [Click,setClick] = useState({button1:false,button2:false})

const changeItem = () =>{
   setClick(prev=> ({...prev, button1: !prev.button1}))
}  

// you can see the updated state here in the next render cycle
console.log(Click.button1);

【讨论】：

【解决方案3】：

这里的问题是，在 changeItem 中，您正在调用 setClick(!Click.button1)，这会重置您的整个 Click 状态变量。

如果您尝试将状态更改为 {button1: true, button2: false}，则可以使用扩展运算符复制您的状态，然后仅修改 button1 的值

const changeItem = () => {
  setClick({ ...Click, button1: !Click.button1 });
}

应该这样做。

【讨论】：