Javascript 在功能组件返回对象之前添加async？

我有一个应用程序组件和图书列表组件，它们在应用程序中呈现。将async添加到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) 

应用程序：

从“React”导入React；
从“样式化组件”导入样式化；
从“./components/BookList”导入图书列表；
从“apollo boost”导入apollo客户端；
从“@apollo/react hooks”导入{ApolloProvider}；
export const client=新客户端({
uri:'http://localhost:4001/graphql',
})
常量应用=（）=>{
返回(
贾维德的阅读清单
);
}
导出默认应用程序；

书目：

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;

constbooklist=async（）=>{
const query=gql`
质疑{
书{
名称
身份证件
}
}
`;
const{data}=wait client.query（{query}）
返回(

书名

);
};
导出默认书目；

我知道添加async会导致返回值成为一个承诺，但我在过去做过这件事，没有任何问题。我不确定我错过了什么。为什么我不能呈现书单

编辑：

我听从了@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;

const BookList=（）=>{
const[data，setData]=useState（null）
useffect（（）=>{
const fetch=async（）=>{
const response=wait client.query（{query}）；
console.log（response.data）；
console.log（'hello'）
setData（response.data）；
}
fetch（）；
}, [])
返回(

书名

);
};
导出默认书目；

你不应该那样做。 相反，使用

useffect

和

useState

钩子获取数据：

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

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

这只是一个例子，根据自己的需要进行调整

---

你为什么不应该那样做？因为正如您所说的，使用

async

将始终返回一个

Promise

，它不是有效的react组件。

我认为这种情况下Promise与react接口不匹配

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

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

---

这回答了你的问题吗？我这样做了，出于某种原因，useEffect钩子没有开火。你知道这是为什么吗？我更新了我的问题以显示更新的代码。@javedb尝试在

获取之前和之后
控制台.log
。什么都没发生？没有任何错误？尝试添加另一个只做console.log的
useffect
？我发现这是因为我做了
uri:'https://localhost:4001/graphql“
当它需要
http
时。起初没有错误，几分钟后，页面将不再加载。这很奇怪。
const apiCall = async () => await client.query(...)