Reactjs 使用apollo client mutate外部渲染时出现问题

我希望有一个名为AuthRoute的自定义组件，不仅可以检查某些数据在redux中是否可用，还可以使用graphql验证令牌

以下是我所做的：

const AuthRoute = ({ component: Component, authUser, ...rest }) => {
  const you_must_go_back_to_login = <Route
    {...rest}
    render={props =>
      (<Redirect to={{
        pathname: '/user/login',
        state: { from: props.location }
      }}
      />)
    }
  />

  const continue_journey = <Route
    {...rest}
    render={props =>
      (<Component {...props} />)
    }
  />

  const [dest, setDest] = useState(you_must_go_back_to_login)
  const [checkThat, setCheckThat] = useState(false)

  useEffect(() => {
    client.mutate({
      mutation: VERIFY_TOKEN_MUTATION,
      variables: { token }
    }).then(result => {
      // setDest(continue_journey)
      setCheckThat(true)
    })
    return () => {
      console.log()
    };
  }, [])

  // if(authUser) {
  if (checkThat) {

    return continue_journey

  } else {
    return you_must_go_back_to_login;
  }
}

更新 我把我的代码改成了这个，但是我仍然得到了同样的错误

const AuthRoute = ({ component: Component, authUser, ...rest }) => {
  const you_must_go_back_to_login = (<Route
    {...rest}
    render={props =>
      (<Redirect to={{
        pathname: '/user/login',
        state: { from: props.location }
      }}
      />)
    }
  />)

  const continue_journey = (<Route
    {...rest}
    render={props =>
      (<Component {...props} />)
    }
  />)

  // const [dest, setDest] = useState(you_must_go_back_to_login)
  const [checkThat, setCheckThat] = useState(false)

  useEffect(() => {
    let isSubscribed = true

    if (isSubscribed) {
      getToken();
    }

    return () => isSubscribed = false
  }, []);

  const getToken = async (sig) => {
    const data = await mutate(VERIFY_TOKEN_MUTATION, { token })
    console.log(data)
    setCheckThat(true);
    console.log(checkThat)
    return;
  };

  return checkThat ? continue_journey : you_must_go_back_to_login;
}

constauthroute=（{component:component，authUser，…rest}）=>{
const您必须返回登录=(
()
}
/>)
持续不断的旅程=(
()
}
/>)
//const[dest，setDest]=useState（您必须返回登录）
const[checkThat，setCheckThat]=useState（false）
useffect（（）=>{
让isSubscribed=true
如果（已订阅）{
getToken（）；
}
return（）=>isSubscribed=false
}, []);
const getToken=async（sig）=>{
常量数据=等待变异（验证标记变异，{TOKEN}）
console.log（数据）
setCheckThat（true）；
console.log（选中该选项）
返回；
};
还支票吗？继续旅程：您必须返回登录；
}

这个警告是不言自明的-

警告：无法对已卸载的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务

特别是本部—

要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务

您以错误的方式使用了

useffect

。您不应该将您的突变放入

useffect

中。你可以做的是-将突变置于

useffect

之外

const [dest, setDest] = useState(you_must_go_back_to_login)
const [checkThat, setCheckThat] = useState(false)

  client.mutate({
      mutation: VERIFY_TOKEN_MUTATION,
      variables: { token }
    }).then(result => {
      // setDest(continue_journey)
      setCheckThat(true)
    })
    return () => {
      console.log()
    };


  useEffect(() => {
    // if(authUser) {
    if (checkThat) {

      return <continue_journey/>

    } else {
      return <you_must_go_back_to_login/>;
    }
  }, [checkThat])
}

const[dest，setDest]=useState（您必须返回登录）
const[checkThat，setCheckThat]=useState（false）
变异({
突变：验证\u标记\u突变，
变量：{token}
})。然后（结果=>{
//setDest（继续旅程）
setCheckThat（true）
})
return（）=>{
console.log（）
};
useffect（（）=>{
//if（authUser）{
如果（勾选）{
返回
}否则{
返回；
}
}，[checkThat]）
}

---

现在将运行变异，然后设置

checkThat

变量。然后将触发

useffect

，它将根据

的值返回，检查
错误是否是由于在获取数据之前呈现重定向造成的

正常。。。相反，您可以使用简单的
useQuery
和使用条件
loading
或
！数据
用于在决定重定向或授予访问权限（呈现重定向或受保护的内容）之前呈现某些内容

变异通常用于更改远程数据。通过使用查询，您也可以传递变量并返回答案

我使用的是django graphql jwt，问题是验证令牌是一种变异

通常情况下，令牌由请求的标头传递，API返回响应或错误（对于丢失/过期的令牌）。通常，您可以选择查询当前用户以进行登录验证

在这种情况下，我们希望使用突变

。。。取而代之的是
client.mutate
我们可以使用钩子（或者更好的钩子（apollo docs:]），在做出决定之前访问
加载状态

const [verifyToken, { data, loading, error }] = useMutation( VERIFY_TOKEN_MUTATION, variables: { token } );

问题？

-突变不会在开始时调用-
加载
在开始时不会为真；
-返回的数据

对于在开始时触发突变，我们可以使用
useffect
，对于返回的数据，我们可以使用
onCompleted
处理程序，但我们可以简单地使用
数据
——应该在开始时未定义/为空，可用于条件

类似的方法应该可以工作（我们不需要等待等-
数据
，
加载
，
错误
将自动更新）：

useffect（（）=>{
verifyToken（）；//前面传递的变量可以在此处传递
}, []);
如果（！数据）返回
返回data.someSuccessVerifiedField？继续旅程：您必须返回登录；
谢谢，我对它进行了测试，发现了以下错误：
警告：函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者您可能想调用此函数而不是返回它。
只需像这样返回包装-
和
。这应该可以解决您的问题。错误是由于``return（）=>{console.log…``行引起的，我删除了该行并将其添加到该行中，但最后我得到了与以前相同的清理错误（最初的错误）错误是由于在获取数据之前呈现重定向而导致的…相反，您可以使用simple
useQuery
（变异用于更改远程数据，使用查询您也可以传递变量并返回答案）并使用
！data
在决定重定向或给定前呈现加载access@xadm，谢谢你提到，我使用的是django graphql jwt，问题是验证代币是一个突变：/导致我头痛我完全按照你说的做了，但问题是我必须再次刷新页面，我想在此处刷新会导致数据在不刷新的情况下无法更新尝试使用
onComplete
和
setCheckThat
…在
wait verifyToken（）之后使用
data
（使用console.log检查）…和
console.log（数据）
在此呈现中（检查更改）…可能渲染
是不必要的（如果成功），请渲染

const [verifyToken, { data, loading, error }] = useMutation( VERIFY_TOKEN_MUTATION, variables: { token } );

useEffect(() => {
  verifyToken(); // ariables passed earlier, can be passed here
}, []);

if( !data ) return <Loading />

return data.someSuccessVerifiedField ? continue_journey : you_must_go_back_to_login;