1

我有一个按钮，单击时显示面板，单击面板时将其隐藏

代码，按预期工作

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我会说我在这里做一些概念上的错误，但找不到它是什么

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

4

1 回答 1

0

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

于 2019-08-20T06:19:13.760 回答