使用样式化组件更改状态 - > React, Uncaught RangeError: Maximum call stack size exceeded

Question

我有一个按钮，当它被点击时显示一个面板，当它被点击时隐藏它

按预期工作的代码

const Loged = () => {
  const [modal, setModal] = useState(0)
  const input_id = React.createRef()
  const input_pass = React.createRef()

  return (
    <MenuLogin modal={modal}>
      <div
        onClick={e => {
          e.stopPropagation()
          setModal(1)
        }}
      >
        Click Me
      </div>

      <div
        onClick={e => {
          e.stopPropagation()
          setModal(0)
        }}
      >
        <div onClick={e => e.stopPropagation()}>
          <input ref={input_id} onClick={e => e.stopPropagation()} placeholder="id" type="text" />
          <input ref={input_pass} onClick={e => e.stopPropagation()} placeholder="password" type="text" />
        </div>
      </div>
    </MenuLogin>
  )
}

MenuLogin 是一个样式化的组件

const MenuLogin = styled.div`
  & > div:last-child {
    visibility: ${props => (props.modal ? 'visible' : 'hidden')};
    opacity: ${props => (props.modal ? '1' : '0')};
  }
`

但是，现在我想在这个组件之外使用setModal，所以我要做的是将const [modal, setModal] = useState(0) 移动到父元素并将这些变量作为参数传递

所以我现在有

const Loged = (modal, setModal) => {
...
}

用这样的父代码

const ParentComponent = () => {
  const [modal, setModal] = useState(0)
  return (<ChildComponent modal={modal} setModal={setModal} />)
}

但是现在，当我尝试从同一位置（在子组件中）隐藏元素 (setModal(0)) 时，我得到了 React, Uncaught RangeError: Maximum call stack size exceeded

如果我做类似的事情

const ParentComponent = () => {
  const [modal, setModal] = useState(0)
  const changeState = (s) => setModal(s)
  return (<ChildComponent modal={modal} setModal={changeState} />)
}

我可以在收到错误之前多点击两次 (??)

阅读React, Uncaught RangeError: Maximum call stack size exceeded 我想说我在这里做一些概念上的错误，但找不到它是什么

编辑： 我可以看到这应该可以工作（见codesandbox） 所以我怀疑是样式化组件以某种方式导致循环？

Answer 1

您的相同代码在样式化组件上看起来可以正常工作 https://codesandbox.io/s/usestate-01-o791y