Question

我尝试在组件渲染后运行测试查询。吼叫我的代码。

在useEffect中执行的testQuery函数不执行任何操作。我不知道为什么...有什么主意吗？

    const Card2 = (props) => {

      const [count, setCount] = useState(0);

      console.log (`count :: ${count}`);

      const [testQuery,{ loading, data}] = useLazyQuery (TEST_QUERY);

      if(loading) debugger;


      useEffect(() => {
        console.log('useEffect');
        testQuery();
        debugger;
      },[count]);

      return(
        <div className={classes.Content} >
          <button className={classes.Price} onClick = {() => setCount(count + 1)}>
          </button>
        </div>
      );
    };

Answer 1

const Card2 = (props) => {

  const [count, setCount] = useState(0);
  const [fetchedData, setFetechedData] = useState([])
  console.log (`count :: ${count}`);

  const [testQuery,{ loading, data}] = useLazyQuery (TEST_QUERY);

  if(loading) debugger;


  useEffect(() => {
    console.log('useEffect');
    testQuery();
    debugger;
  },[count]);

  useEffect(() => {
    data && setFetechedData([...fetchedData, data])
  },[data]);

  return(
    <div className={classes.Content} >
      <button className={classes.Price} onClick = {() => setCount(count + 1)}>
      </button>
    </div>
  );
};

您必须以某种方式处理来自查询的响应。您可以添加另一个 useEffect 来监听更改。

React / Apollo客户端：尝试在useEffect挂钩中使用LazyQuery

1 个答案: