Question

我有点困惑。根据{{3}}以及this SO question的说法，在调用useEffect钩子填充状态后，我应该能够调用useQuery钩子，这是通过{{1} }。例如，诸如此类（假设useReducer，foo和bar在对GraphQL服务器的单个请求中被命名为查询）：

baz

由于我无法确定的原因，当我在const MyComponent = ( props ) => { const [ state, dispatch ] = useReducer( reducer, initialState ) const query = someCondition ? query1 : query2 const variables = { variables: someCondition ? query1Vars : query2Vars } const { loading, error, data } = useQuery( query, variables ) useEffect(function() { dispatch({ type: types.INIT, payload: { foo: data.foo, bar: data.bar, baz: data.baz } }) }, [data]) return ( <div> { (() => { if ( loading ) return <Loading /> if ( error ) return <Error /> return ( // components that depend on data ) })() } </div> ) }中引用data时，它就是undefined。我已经检查了我的网络响应，并且对GraphQL端点的调用确实正在返回数据。（本质上是this question中描述的内容。）

除了条件查询/变量赋值外，此代码还用于其他一些组件，并且可以正常工作，所以我不知道为什么在我的情况下它不起作用。

我不确定这是怎么回事，因为我已经确保没有任何钩子被有条件地调用，这违反了钩子规则；我正在做的是通过Apollo客户端在发送查询之前有条件地分配变量值。（我还尝试了useEffect选项的onCompleted属性，但没有useQuery钩子，但无济于事； useEffect仍然是data。）

Answer 1

除非我不完全了解您的问题，否则这似乎是预期的行为。

useEffect将在挂载时触发，然后在data进行任何更改时，data仅在API调用完成后才会更改。最初的useEffect调用将在useQuery得到服务器响应之前发生，因此您不能在useEffect内部假定将设置data。

如果您只想在data时分派，则应保护呼叫，例如

useEffect(() => {
  if (data) {
    dispatch({
      type: types.INIT,
      payload: {
        foo: data.foo,
        bar: data.bar,
        baz: data.baz
      }
    });
  }
}, [data]);

调用useEffect挂钩时，useQuery数据未定义？

1 个答案: