React 应用程序在状态更改和登录后不会重新渲染

Question

我的 React 应用程序遇到一些问题。它有一个使用 React 和 Typescript 的前端和一个使用 Go 的后端。当用户想要登录或有人注册时，我从后端数据库获取数据。后端还使用 google books api 来获取一些书籍信息。 我的网站有一个搜索栏，允许用户通过书名和其他属性查找书籍。当用户单击搜索时，我的前端会调用我的后端 api，该 API 反过来会获取所有符合用户条件的书籍并将其发送到我的前端。数据保存在 useState 变量（数组）中。这是我注意到我的问题的地方。当数据到达时，只有当我单击网站上的另一个元素（例如弹出菜单）时，它才会呈现在网站上。否则不会渲染。

这是包含 Searcharea.tsx 的组件： https://github.com/cihanbatasul/bookapi/blob/master/frontend/booksapi/src/views/Home.tsx

这是对后端进行调用的 SearchArea 组件： https://github.com/cihanbatasul/bookapi/blob/master/frontend/booksapi/src/components/searcharea/SearchAreaNew.tsx

它渲染了

{dataLoaded !== false && (
        <SearchResults
          ref={ref}
          dataLoaded={dataLoaded}
          onOrderClick={handleOrder}
          onViewClick={handleViewClick}
          searchResults={searchResults}
        />
      )}

当 dataLoaded 变量为 true 时。但即使

  const [searchResults, setSearchResults] = useState<VolumeInfoWithImages[]>(
    [],
  );

其中包含所有找到的书籍，直到我单击导致重新渲染的元素（例如下拉菜单按钮）后，结果才会渲染。当我登录并注销我的帐户时也会出现此问题（这意味着仅对登录用户可见的组件和按钮在注销后仍然可见）。

我尽了一切努力，但没有任何帮助。

提前谢谢您！

我尝试更改条件渲染语句，但所有变体都不起作用。

Answer 1

fetchUserData

是 async，所以你应该在第 48 行用 await 来调用它。