使用样式化组件更改状态 -> 反应，未捕获范围错误：超出最大调用堆栈大小

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

我可以在收到错误之前多单击两次(？？

读取反应，未捕获范围错误：超出最大调用堆栈大小我会说我在这里做了一些概念上错误的事情，但找不到它是什么

编辑： 我可以看到这应该有效(请参阅代码沙箱( 所以我怀疑是以某种方式导致循环的样式组件？

Answer 1

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