求教：最大更新深度超出原因

Question

I am new to React and GraphQL. Trying to update React state with GraphQL subscription feed but it generates the update depth error.

Here is the simplified code:

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;

Regular query works fine in the app and the Subscription tag returns usable results, so I believe the problem is on the React side.

I assume the displayed code contains the source of error because commenting out the function "Sub" stops the depth error.

Answer 1

You see what happens is when this part renders

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

setTest() is called and state is set which causes a re-render, that re-render cause the above block to re-render and setTest() is called again and the loop goes on.

Try to fetch and setTest() in your useEffect() Hook so it does not gets stuck in that re-render loop.

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} />