Ищу совет: причина для максимальной глубины обновления превышает - PullRequest
Новая
       20

Ищу совет: причина для максимальной глубины обновления превышает

0 голосов
/ 24 февраля 2020

Я новичок в React и GraphQL. Попытка обновить состояние React с помощью канала подписки GraphQL, но при этом возникает ошибка глубины обновления.

Вот упрощенный код: 

import { Subscription } from 'react-apollo';
...

function Comp() {
  const [test, setTest] = useState([]);

  const Sub = function() {
    return (
      <Subscription subscription={someStatement}>
        {
          result => setTest(...test, result.data);
          return null;
        }
      </Subscription> 
    );
  };

  const Draw = function() {
    return ( 
      <div> { test.map(x => <p>{x}</p>) } </div> 
    );
  };

  return (
    <div>
      <Sub />
      <Draw />
    <div/>
  );
};
export default Comp;

В приложении работает обычный запрос, и возвращается тег подписки. полезные результаты, поэтому я считаю, что проблема на стороне React.

Я предполагаю, что отображаемый код содержит источник ошибки, поскольку комментирование функции «Sub» останавливает ошибку глубины.

1 Ответ

1 голос
/ 24 февраля 2020

Вы видите, что происходит, когда эта часть рендеринга 

    <Subscription subscription={someStatement}>
        {
          result => setTest(...test, result.data);
          return null;
        }
      </Subscription>

setTest() вызывается и устанавливается состояние, которое вызывает повторный рендеринг, что приводит к повторному рендерингу вышеупомянутого блока до re-render и setTest() вызывается снова, и l oop продолжается.

Попробуйте извлечь и setTest() в вашем useEffect() Hook, чтобы он не застрял в этом повторном рендеринге l oop.

useEffect like 

  useEffect(() => {
           //idk where result obj are you getting from but it is supposed to be 
           //like this
      setTest(...test, result.data);
  }, [test] )

Component Like 

 <Subscription subscription={someStatement} />
...