Реакция: Невозможно обновить компонент внутри тела функции другого компонента.

Question

Я пытаюсь визуализировать компонент <IntercomClient /> только после того, как пользователь нажмет «Принять» на баннере согласия повара ie. Нажатие кнопки «Принять» изменяет состояние intercomIsActive GlobalLayout на 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

import React, {useState} from 'react';
const Example = () => {
const [intercomIsActive, setIntercomIsActive] = useState(false)

return (
  <Layout>
 ...
  <CookieBanner
    onAccept={() => setIntercomIsActive(true)}
  />
    {
         intercomIsActive &&
          <IntercomClient active={intercomIsActive}/>
       }

       ...
       </Layout>
    );
};
export default Example;

Answer 2

import React, {useState} from 'react';
const Example = () => {
  const [intercomIsActive, setIntercomIsActive] = useState(false)

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

      <IntercomClient active={intercomIsActive}/>
     ...
   </Layout>
  );
};
export default Example;