在子组件这样做之前,我一直试图在根组件中触发事件(即调用Redux操作)。
在这张图中......
fetchData()
。当URL是/
时,我们只会看到这个parent
。getDetail(id)
。当URL是/child
时,我们会在child
上看到这个parent
。componentWillMount
发生事件问题是,当你直接访问/child
时,在调用fetchData()
之后调用getDetail(id)
。
(当你访问/
并访问/chile
时,fetchData()
首先被解雇。)
是否可以从较高组件触发事件以降低组件?
附:
这是这个问题的背景......
父级是博客帖子列表,其子级是详细信息页面,您可以在其中查看单个博客帖子的详细信息。
在列表(父页面)上,您将单击一个detail
按钮,该按钮将引导您进入详细信息页面。为了实现这一点,有必要在显示它们的细节之前获取所有项目。
修改 - 更新以反映您的上述回复。
我认为正确的方法是让您的州反映到达详细信息页面的可能方式。让fetchData()
实际确定是否需要提取,并从父组件和子组件中调用它。
听起来你正在使用react-router或类似的方法 - 这种情况很常见。我建议您跟踪当前所选的id(如果您正在查看帖子列表,则不确定),然后在子项目可用时呈现它。
假设fetchData()是异步的,我不认为生命周期方法的顺序是真正的问题。
因此,解决这个问题的方法是考虑您的组件正在做什么。您应该有一个主页,按标题和日期或您决定的任何内容列出帖子。然后,当您单击其中一个时,它将转到包含博客文章的页面。
所以你应该有一个PostList
组件和一个Post
组件。 PostList
应该获取显示列表所需的所有数据。 Post
应该获取所有数据以显示帖子。当你渲染PostList
时,它不应该渲染任何Post
。 Post
只应在您发布帖子的URL时呈现。要获得这种行为,您需要一个像found或react router这样的路由器。
现在可能会发现PostList
正在获取Post
需要显示每篇博文的所有细节。那样就好。您的州管理层应该检测到您已经拥有博客文章而不是获取它。这就是为什么你看到像fetchBlogPostIfNeeded
这样的行为 - 调用该函数通常检查本地状态以查看博客帖子是否已经存在,如果是,它什么都不做。如果没有,它实际上取了它。
通过这种组合和适当的服务器端路由,您的博客应该支持在帖子列表或查看单个帖子时进行硬刷新。关键部分是您使用URL从列表转到帖子。要做到这一点,你将使用Link
组件(发现和反应路由器都有一个与此相同的组件)。