javascript - 为什么传递给 useState() 的 bool 变量总是 false？ react 钩子(Hook)

Question

我有一个简单的功能组件，想根据条件用 bool 值初始化状态。例如:

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 显示 false 后执行 console.log ???

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

Answer 1

正如你所说

st is just fetching the state from redux

这可能就是问题所在。

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

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

您可以做的是在 type 更改时使用 useEffect 钩子(Hook)重置 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])

}