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

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.logloading看看

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

Why does functional component render twice?

reactjs

graphql

react-apollo