reactjs - React Hooks - useMutation 被调用 50 多次

Question

基本上我有这个组件，它有 3 个嵌套的 Query 组件，我想根据这些查询之一是否带回数据来调用我的突变之一。

我想在 Query 组件中调用一个突变，但是我发现我的突变不断更新导致组件多次渲染的状态。本质上，它正在执行我的突变 50 多次。我想我误解了反应钩子以及它们是如何工作的。

示例代码：

import MyMutation from 'mutations/MyMutation.graphql'

const myComponent = ( {props} ) => {
  const [myMutation] = useMutation(MyMutation);

  return (
    <Query query ={GetUserData} variables={{ input: { id }}}>
      {({ data: userData, loading: dataLoading }) => (
        <Query query ={GetOtherData} variables={{ input: { id }}}>
          {({ data: otherUserData, loading: otherUserDataLoading}) => (
            <Query query ={GetOtherOtherData} variables={{ input: { id }}}>
              {({ data: otherOtheruserData, loading: otherOtheruserDataLoading }) => {

                if (dataLoading || otherUserDataLoading|| otherOtheruserDataLoading ) {
                  return null;
                }
                if (userData) {
                  myMutation({ variables: { input: { id, userData.updatedValue } } }).catch(() => {});
                }

标签： reactjsreact-hooks