React useQuery 将数据传递给子组件而不重新渲染答案

【问题标题】：React useQuery pass data to child component without rerenderReact useQuery 将数据传递给子组件而不重新渲染
【发布时间】：2021-04-03 09:28:49
【问题描述】：

我是新来的反应，钩子和 gql，并遇到了这个问题 - 每次查询运行时，我都会得到“正在加载...”和地图组件的重新渲染（地图消失，然后出现新数据） .有没有办法在没有 MapBox 组件重新渲染和“正在加载...”标志的情况下将其直接传递给地图？我想我可以将 gql 放到 MapBox 组件中并从那里运行查询，但是如果可以像我描述的那样做呢？谢谢

PS： 每次我单击缩放按钮时，MapProvider 都会更新查询并打印 Loading and rerender the map MapBox 组件。我想以某种方式将查询中的数据传递给 MapBox comp，并且不重新渲染 MapBox 组件

import { useQuery, gql } from "@apollo/client";
import { useState, useEffect } from "react";
import MapBox from "./map";

const MAP_QUERY = gql`
  query MapQuery($position: [[Float]]!, $zoom: Float!) {
    lines: linesByPosition(position: $position, zoom: $zoom) {
     return some lines geojson
    }
  }
`;
const MapProvider = () => {

  const [zoom, setZoom] = useState(5);
  const [position, setPosition] = useState([
    [47.61003115514454, 18.991722981667806],
    [47.60679062928742, 19.263634602761556],
    
  ])
  console.log('position', position);
  const { loading, error, data, refetch } = useQuery(MAP_QUERY, {
    variables: {
      zoom: 12, position: [
        [47.61003115514454, 18.991722981667806],
        [47.60679062928742, 19.263634602761556],
      ]
    },
  });

  useEffect(() => {
    console.log('REFETCH !!! zoom, positioin', zoom, position);
    refetch({ zoom, position });
  }, [zoom, position]);

  
  if (loading) return <p>Loading...</p>;
  if (error) return <div>Error: {error.message}</div >;
  const { lines } = data;

  return (<>
    <MapBox geojson={{ lines }} zoom={zoom} />
    <button onClick={
      () => setZoom(zoom + 1)
    }>Zoom</button>
  </>)
}

export default MapProvider;

【问题讨论】：

你想在第一个查询加载后显示并且永远看不到加载吗？
@b3hr4d 是的，我想加载数据并将其传递给 MapBox 组件，而不会在每次单击 Zoom 按钮更新 MapProvider 查询时看到加载。

标签： reactjs graphql use-effect use-state

【解决方案1】：

只需检查数据是否可用并显示加载：

  if (!data && loading) return <p>Loading...</p>;
  if (!data && error) return <div>Error: {error.message}</div >;

但最好的方法应该是在屏幕上进行绝对加载以获得更好的用户体验，或者像这样禁用缩放按钮：

<button onClick={
  () => setZoom(zoom + 1)
} disable={loading}>Zoom</button>

【讨论】：