为什么功能组件渲染两次？

Question

我有一个组件可以使用Apollo从GraphQL路由中获取数据。

当我加载页面时，它的控制台记录了两次数据。

这是组件：

const LAUNCHES_QUERY = gql`
  query LaunchesQuery {
    launches {
      flight_number
      mission_name
      launch_date_local
      launch_success
    }
  }
`

const Launches = () => {

    const { loading, error, data } = useQuery(LAUNCHES_QUERY)

    const getLaunches = () => {

        if (loading) return <div>Loading..</div>
        if (error) console.log(error)
        console.log(data)
    }

  return (
    <div>
      <h1 className='display-4 my-3'>Launches</h1>
      {getLaunches()}
    </div>
  )
}

我在做什么错？

Answer 1

useQuery是异步操作，第一个渲染将在获取数据时进行，下一个渲染将在获取数据时进行。因此，它记录了两次。

Answer 2

一个是从useQuery的开头开始的，另一个是从useQuery完成提取后开始的。

您可以console.log loading来查看。