尝试将 useState() 用于语义 UI 调光器时出现“错误：重新渲染过多”

Question

我试图让调光器仅在点击ETH或Select a token按钮点击时显示。我什至无法让状态部分工作，所以我可以连接按钮。

function Main () {
  const [accountAddress, setAccountAddress] = useState(null);
  const [show, setShow] = useState(false);

return (
    <div ref={contextRef}>
      <Dimmer.Dimmable as={Segment} dimmed={show}>
          <Grid style={styles.grid}>
            <Grid.Row>
              <Grid.Column>
                <Card style={styles.card} centered>
                  <Card.Content>
                    <Card.Header style={styles.padding}>Swap / Pool</Card.Header>
                      <Input style={styles.padding} fluid type='text' placeholder='0.0'>
                        <Label basic>From</Label>
                        <input />
                        <Button>ETH <Icon name='angle down' /></Button>
                      </Input>
                      <Input style={styles.padding} fluid type='text' placeholder='0.0'>
                        <Label basic>To</Label>
                        <input />
                        <Button>Select a Token <Icon name='angle down' /></Button>
                      </Input>
                      <Button style={styles.padding} color='teal' fluid size='large'>
                        Connect Wallet
                      </Button>
                  </Card.Content>
                </Card>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        <Dimmer onClickOutside={setShow(false)}>
          <Header as='h2' icon inverted>
            <Icon name='heart' />
            Dimmed Message!
          </Header>
        </Dimmer>
      </Dimmer.Dimmable>
    </div>
  );
}

我删除了很多不相关的代码，但留在我使用的另一个实例中，useState()因为我觉得这可能是问题的一部分。

任何帮助表示赞赏，谢谢。

Answer 1

最初您<Dimmer onClickOutside={setShow(false)}>在代码中使用 as 。通过这种方式，它进入一个无限循环，因为在每次渲染时它都会被调用，从而触发另一个渲染。

您需要作为回调传递：

<Dimmer onClickOutside={() => setShow(false)}>

这样setShow(false)一旦onClickOutside事件触发就会被调用。