0

我正在内部 UI 上创建单页应用程序。屏幕左侧出现一个菜单 ( CollectionsInventory)，其中包含Link从 API 调用生成的 s，在右侧，生成的对象 (a Collection) 显示在其组件中。道具通过 a 传递url-parameters。我还使用Grid来自 patternfly4 的组件来管理 UI。这是它的样子：

<Grid hasGutter>
  <GridItem span={3}>
    {data != null ?
      <CollectionsInventory collections={data[0].collections}/>
    :
      <React.Fragment>
        <Spinner />
      </React.Fragment>
    }
  </GridItem>
  <GridItem span={9}>
    <Router primary={false}>
      <React.Fragment path="/" />
      <Collection path="collection/:collectionName" />
    </Router>
  </GridItem>
</Grid>

这就是问题所在；我可以通过单击相应的链接或直接访问它来显示一个集合（例如，如果用户想要访问他最喜欢的集合的书签，这很有用）。但随后，收藏品就卡在那里了。每当我点击一个新链接时，什么都没有改变。也许是因为它在同一条路上？有没有办法让链接触发重新渲染？或者我没有使用正确的组件，因为带有链接的菜单在路由器之外？

在CollectionsInventory中，链接显示在表格中，并且是从集合名称生成的，如下所示：

const defaultRows = collectionList.map( collection => {
  const collectionLink=`collection/${encodeURI(collection.name)}`

  return {
    cells: [
      {
        title:
          <Link to={collectionLink}>
            {collection.name}
          </Link>,
        name: collection.name
      },
      collection.resourceType,
      collection.size
    ]
  }
});
4

1 回答 1

0

问题是我的组件在更新道具Collection时没有重新渲染。collectionName每当我们更改道具时，我都坚持反应组件会重新渲染，但显然情况并非如此。所以我添加了一个效果，props.collectionName以便在 apiFetch 进程发生变化时重新启动它，瞧！Collection每当我选择新链接时，组件都会更新。

奖励：确切地说，我使用的 fetchApi 方法是一个回调，每次修改时都会修改props.collectionName它。这是缩短版本：

const Collection = ({ collectionName }) => {
  const fetchData = useCallback(()=>{
    const apiPath = `/collection/${collectionName}`;
    /* do stuff to retrieve the data and set it in the state, or handle errors*/
  },[collectionName]);

  useEffect(()=>{
    fetchData();
  },[fetchData]);

  return(
   /*The actual content*/
  );
};
于 2020-08-25T19:33:18.967 回答