为什么布尔变量被传递给useState()总是false?反作用挂钩

Question

我有一个简单的函数组件，希望根据条件用布尔值初始化状态。例如：

export default() => {
const st = useSelector(state => state.body);
const { type } = st;
let bool = type === 'test'
const [ hidden, setHidden ] = useState(bool) //this is always true
}

st只是从redux中获取状态，type将是条件。在某些情况下，type将被测试，因此bool将为true，但当它初始化state时，它总是false。

在useState和hidden显示错误后，我执行console.log？？？

我不确定是什么原因造成了错误。我是不是错过了什么？我感谢你的帮助和见解

Answer 1

正如您所说的

st只是从redux 获取状态

这可能是问题所在。

可能在第一次渲染中，从redux获得的值不是正确的值(可能是null或undefined(，因此它将状态的默认值设置为false，然后进行第二次渲染，返回正确的值，但不会将其重新分配给状态。

useState的默认值将仅在第一次渲染中设置，如果在第一次呈现中它不是您想要的，则除非您设置它，否则它不会更改。

当type更改时，可以使用useEffect钩子重置hidden

export default () => {
const st = useSelector(state => state.body);
const { type } = st;
let bool = type === 'test';
const [ hidden, setHidden ] = useState(bool) //this is always true
// reset hidden if type changes
useEffect(() => {
setHidden(type === 'test')
}, [type])
}