反应：无法从其他组件的函数体内更新组件

Question

我试图仅在用户单击Cookie同意横幅上的“接受”后才呈现组件<IntercomClient />。单击接受会将GlobalLayout的intercomIsActive状态更改为true，从而呈现IntercomClient。这是可行的，但警告令我担忧。

我如何解决子状态/父状态更改？我一直在环顾四周，但不太了解。

import React, { useState } from 'react'
import { CookieBanner } from '@palmabit/react-cookie-law'

import IntercomClient from '../components/intercomClient'

const GlobalLayout = ({ location, children }) => {
   const [intercomIsActive, setIntercomIsActive] = useState(false)

   return (
   ...
      <CookieBanner
        onAccept={() => setIntercomIsActive(true)}
      />

      <IntercomClient active={intercomIsActive}/>
   ...
  )}

IntercomClient

import React from 'react';

import Intercom from 'react-intercom'

const IntercomClient = ({ active }) => {
  return active ? <div><Intercom appID="XXXXXX" /></div> : null
}


export default IntercomClient;

Answer 1

df$stats[[1]][1,2]

Answer 2

@ServerOnly