可以从 React Hook 调用中解构结果吗？

Question

Currently, I have code as I've outlined below in my React functional component. As you can see, the actual information I iterate over comes back as an array in data.speakers.datalist

Is there some de-structuring syntax that I can use such that my actual array is just data?

Something like

const { loading, error, {data: speakers: {data}} } = useQuery...

My useQuery and render usage is a follows:

const { loading, error, data } = useQuery(GET_SPEAKERS, {
  variables: {
    offset: currentPage * limit,
    limit: limit,
  },
});

return (
  <div>
    {data.speakers.datalist.map(({ id }) => {
      return (
        <div key={id}>{id}</div>
      );
    }})}
  </div>

Answer 1

const { loading, error, data: {speakers: { datalist }}} = useQuery...

不过，我认为只调用data.speakers.datalist.map看起来更干净。