使用样式组件更改状态->React，未捕获的RangeError：超出最大调用堆栈大小

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

其中< code>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，未捕获的 RangeError：超过了最大调用堆栈大小，我会说我在这里做了一些概念上错误的事情，但找不到它是什么

编辑：我可以看到这应该是可行的（参见代码沙盒），所以我怀疑是样式化组件以某种方式导致了循环？




Answer 1

相同的代码看起来可以很好地处理样式化组件https://codesandbox.io/s/usestate-01-o791y