React Strict Mode 导致多次渲染和未定义的查询数据？

编程问答 2022-05-02

问题描述

我在一个类项目中使用 React Strict 模式，我遇到了一个问题，即组件会多次渲染，而嵌套组件会多次渲染。我使用路由，这是到目前为止我的组件的结构方式：

  • 主要组件

    • 主屏幕组件

      • 导航栏组件

      • 屏幕组件（通过 React Router Switch 控制）

因此，通过这种方式，单击某些屏幕组件会将您路由到其他屏幕组件。但是，无论 x 是多少，组件似乎都会渲染 2^x 次。例如，我有一个屏幕组件，它似乎呈现 16 次，因为我有一个 console.log 语句可以打印 16 次。

我还使用 Apollo GraphQL 在每个组件中查询我的后端，但在大多数渲染中它返回未定义，这很麻烦，因为我需要在函数中使用该查询数据并为这些组件渲染。我这样构造我的代码：

const RegionViewer = (props) => {

    const { currentRegion } = useParams();
    const { data,refetch } = useQuery(GET_REGION,{variables: {regionId: currentRegion}});
    const [addLandmark] = useMutation(mutations.ADD_LANDMARK);
    const { data: subregions } = useQuery(GET_SUBREGIONS_BY_ID,{variables: {regionId: currentRegion}})
    const { data: landmarks} = useQuery(GET_LANDMARKS,{variables: {region_id: currentRegion}});

    const [input,setInput] = useState("");
    const [target,setTarget] = useState({});

    console.log(landmarks);
    console.log(data);
    console.log(subregions);

    if (data && subregions && landmarks) {

        const region = data.getRegion;
        const numSubregions = subregions.getSubregionsById.length;

        const updateInput = async (e) => {
            const value = e.target.value;
            setTarget(e.target);
            await setInput(value);
        }

        const createLandmark = async () => {
            console.log(region.landmarks);
            if (input == "") {
                alert("Please enter a landmark.");
            }
            else {
                const {data} = await addLandmark({variables: {region_id: region._id,landmark: input}})
            }
            target.value = "";
            setInput("");
            await refetch();

        }
        return(<div>...</div>)
    }
    else return(<></>)
}

因为我查询了多个返回 undefined 多次的内容（每个大约 14 个，以及 2 个已定义的返回），所以我只是将所有内容包装在一个条件语句中。我想知道是否有更好的方法来解决这个问题，同时仍然使用严格模式。我尝试使用通过 useEffect 调用的 lazyQuery，但这似乎没有帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

apolloapolloapollographqlgraphqljavascriptreactjsreactjsreactjsreactjs