UseQuery graphql -> useState with useEffect 这样我就可以运行第二个 useEffect 来设置更多状态

Question

我在 NextJS 项目中使用 Apollo 进行 graphQL 查询我有以下请求。我觉得解决这个问题很简单，但是错误发生在 stateData.allProducts 部分，它说它是空的，但是我已经在 useEffect 中设置了状态并且它有 data 作为依赖项数组，所以它不应该在数据加载后重新呈现。

如果我将这些检查放在检查加载和 return ...loading 的 if 语句下面，这一切都很好，但是我不能使用 useEffect。

任何关于我做错了什么的帮助将不胜感激。

谢谢！

  const { data, loading, error } = useQuery(QUERY);

  const Router = useRouter();

  // Creating state and setting it from query

  const [stateData, setStateData] = useState(null);
  const [disableAddToCart, setDisableAddToCart] = useState(false);


  useEffect(() => {
    setStateData(data);
  }, [data]);  
 
                       //~~~~~~~// <--- RIGHT HERE IS WHERE I GET THE NULL ERROR
  const productFound = stateData.allProduct.find(
    (product: any) => product.slug.current === Router.query.product
  );

  const currentItem = cartDetails[productFound.id];

  useEffect((): void => {
    console.log("currentItem", currentItem);
    if (currentItem) {
      if (currentItem.quantity > 0) {
        setDisableAddToCart(true);
      } else {
        setDisableAddToCart(false);
      }
    }
  }, [currentItem]);

Answer 1

只要您的查询正在加载，或者如果出现错误，来自 useQuery 的 data 变量将是 null。

因此您必须检查 loading 是否已完成并且没有 error 发生。 And/or 为要定义的 data。

此外，stateData是不必要的，因为data已经是一个ready-to-use状态变量。

const { data, loading, error } = useQuery(QUERY);
const Router = useRouter();
const [disableAddToCart, setDisableAddToCart] = useState(false);


let productFound;
let currentItem;

if(!loading && !error && data?.allProduct){
  productFound = data.allProduct.find(
    (product: any) => product.slug.current === Router.query.product
  );

  currentItem = cartDetails[productFound.id];

}




useEffect((): void => {
  //since you are using typescript, you can use the optional chaining operator
  if (currentItem?.quantity > 0) {
    setDisableAddToCart(true);
  } else {
    setDisableAddToCart(false);
  }
  
}, [currentItem]);

UseQuery graphql -> useState with useEffect 这样我就可以运行第二个 useEffect 来设置更多状态

UseQuery graphql -> useState with useEffect such that I can run second useEffect to set more state

javascript

apollo

reactjs

graphql

next.js

UseQuery graphql -> useState with useEffect 这样我就可以 运行 第二个 useEffect 来设置更多状态

UseQuery graphql -> useState with useEffect such that I can run second useEffect to set more state

javascript

apollo

reactjs

graphql

next.js

UseQuery graphql -> useState with useEffect 这样我就可以运行第二个 useEffect 来设置更多状态