在功能组件之前添加异步会导致它返回一个对象？

Question

我有一个 App 组件和 BookList 组件，在 App 中渲染。当我将异步添加到我的 BookList 组件时，我收到以下错误：

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in BookList (at App.js:18)
    in div (at App.js:16)
    in ApolloProvider (at App.js:15)
    in App (at src/index.js:16)
    in StrictMode (at src/index.js:14) 

应用：

import React from 'react';
import styled from 'styled-components';
import BookList from './components/BookList';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';

export const client = new ApolloClient({
  uri: 'http://localhost:4001/graphql',
})

const App = () => {
  return (
    <ApolloProvider client={client}>
      <div id='main'>
        <h1>Javed's Reading List</h1>
        <BookList />
      </div>
    </ApolloProvider>
  );
}

export default App;

书单：

const BookList = async () => {

  const query = gql`
    query {
      books {
        name
        id
      }
    }
  `;

  const { data } = await client.query({ query })
  return (
    <div id='main'>
      <ul id='book-list'>
        <li>Book Name</li>
      </ul>
    </div>
  );
};

export default BookList;

我知道添加 async 会导致返回值成为一个承诺，但我过去已经这样做了，没有任何问题。我不确定我错过了什么。为什么我不能渲染 BookList？

编辑：

我听从了@MorKadosh 的建议，并且 useEffect 钩子在页面加载时没有触发

const BookList = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetch = async () => {
      const response = await client.query({ query });
      console.log(response.data);
      console.log('hello')
      setData(response.data);
    }
    fetch();
  }, [])

  return (
    <div id='main'>
      <ul id='book-list'>
        <li>Book Name</li>
      </ul>
    </div>
  );
};

export default BookList;

Answer 1

你不应该那样做。 相反，请使用 useEffect 和 useState 挂钩来获取您的数据：

  const [data, setData] = useState(null);

  useEffect(() => {
    const query = ...
    const fetch = async () => {
       const response = await client.query({ query });
       setData(response.data);
    };
    fetch();
  }, []);

这只是示例，请根据自己的需要进行调整。

为什么你不应该这样做？因为正如您所说的正确，使用 async 将始终返回 Promise 这不是有效的反应组件。

Answer 2

我认为承诺与反应接口不匹配

为什么不将 API 调用封装在异步函数中或使用 useEffect 挂钩？

const apiCall = async () => await client.query(...)