为什么传递给 useState() 的布尔变量总是假的？反应钩子

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会是真的，但是当它初始化时它state总是假的。

我做了一个console.log之后useState并hidden显示假？？？

我不确定是什么导致错误。我错过了什么吗？我感谢您的帮助和见解

Answer 1

如你所说

st 只是从 redux 中获取状态

这大概就是问题所在。

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

的默认值useState只会在第一次渲染时设置，如果在第一次渲染中它不是你想要的，它不会改变，除非你设置它。

您可以做的是使用useEffect钩子hidden在type更改时重置

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])

}