Question

我有以下结构：

<CategoryRecipesList>
  <Title> Recipes for {this.props.category} </Title>
  <Mesh> You can also click on : {categoryList.map(el => <Link to={'categories/' + el}>{el}</Link>} </Mesh>

  <Grid>
   recipes.map((s, i) => <Card {...s}/>)
  </Grid>
</CategoryRecipesList>

我在CategoryList组件上有一个构造函数，它根据recipes参数获取category列表。

当我点击<Link/>标记时，标题和网址会更新，但不会更新网格中的<Card>。

有没有人有任何线索？

Answer 1

你可能正在关注Update Blocking。尝试使用withRouter包装Card组件。

export default withRouter(Card)

Answer 2

我找到了解决方案。我需要考虑网格中的牌取决于父组件（）中的道具。因此，如果我通过点击<Mesh/>来更改网址，我需要使用ComponentWillReceiveProps(newProps)方法，通过比较（this.props.category和{{1}来比较this.props.category是否发生了变化}）。如果是这样，我需要获取新卡以准确显示。现在运作良好。

在newProps.category组件中：

<CategoryRecipesList>

来自react-router的我的链接标签不会改变我的页面

2 个答案: