java - JHipster React 在另一个相关实体的详细信息屏幕中显示一个实体的列表

Question

我正在尝试以 JHipster 7.0.1 (Azul JDK 11) 和 ReactJS 作为前端的应用程序。

我的 JDL 中有 2 个实体 - Domain 和 BadgeCategory 相关，如下所示

relationship OneToMany {
    Domain{badgeClass required} to BadgeCategory{domain(name) required}

我希望能够在“域详细信息”屏幕中显示特定域的所有 BadgeCategories。

为此，我在存储库BadgeCategoryRepository.java中创建了一个新方法

@Repository
public interface BadgeCategoryRepository extends JpaRepository<BadgeCategory, Long> {
    List<BadgeCategory> findByDomainId(Long id);
}

然后在BadgeCategoryResource.java中添加一个新端点

@GetMapping("/badge-categories-domain/{id}")
public ResponseEntity<List<BadgeCategory>> getAllBadgeCategoriesForDomain(@PathVariable Long id) {
    log.debug("REST request to get BadgeCategories for Domain : {}", id);
    List<BadgeCategory> badgeCategory = badgeCategoryRepository.findByDomainId(id);
    return ResponseEntity.ok().body(badgeCategory);
}

现在来到 React 部分，我在badge-category.reducer.ts中添加了一个常量

export const getEntitiesForDomain = createAsyncThunk(
  'badgeCategory/fetch_entity_list_for_domain', 
  async (id: string) => {
    const requestUrl = `api/badge-categories-domain/${id}`;
    alert(JSON.stringify(axios.get<IBadgeCategory[]>(requestUrl)));
    return axios.get<IBadgeCategory[]>(requestUrl);
  });

然后我在 Domain Detail 屏幕组件domain-detail.tsx中使用这个 reducer

import { getEntity as getBadgeCategory, getEntitiesForDomain } from '../badge-category/badge-category.reducer';

  const domainEntity = useAppSelector(state => state.domain.entity);
  const badgeCategoryList = useAppSelector(state => state.badgeCategory.entities);

  useEffect(() => {
    dispatch(getEntity(props.match.params.id));
    dispatch(getEntitiesForDomain(props.match.params.id));
  }, []);

我期望常量badgeCategoryList 包含域详细信息屏幕中引用的域的所有徽章类别的列表。但我没有得到任何回报。

在检查流程时，我看到端点被命中并且 Java 代码正在生成响应，但 UI 代码无法使用它。

我在这里错过了什么导致这个问题？

Swagger 文档显示来自 Java 代码的预期响应

标签： javaspringreact-reduxjhipster

Answer 1

所以问题在于新的 API 调用没有注册到 reducer 中的 slice 部分。我必须对切片进行以下添加，它就像一个魅力

.addMatcher(isFulfilled(getEntitiesForDomain), (state, action) => {
   return {
     ...state,
     loading: false,
     entities: action.payload.data,
   };
})