React&Redux:如何在儿童中发射事件之前在父母身上发射事件?

问题描述 投票:0回答:2

在子组件这样做之前,我一直试图在根组件中触发事件(即调用Redux操作)。

Enter image description here

在这张图中......

  • 父母(即所有者)有一个动作fetchData()。当URL是/时,我们只会看到这个parent
  • 孩子(即Ownee)有一个动作getDetail(id)。当URL是/child时,我们会在child上看到这个parent
  • 两个组成部分都在componentWillMount发生事件

问题是,当你直接访问/child时,在调用fetchData()之后调用getDetail(id)

(当你访问/并访问/chile时,fetchData()首先被解雇。)

是否可以从较高组件触发事件以降低组件?

附:

这是这个问题的背景......

父级是博客帖子列表,其子级是详细信息页面,您可以在其中查看单个博客帖子的详细信息。

在列表(父页面)上,您将单击一个detail按钮,该按钮将引导您进入详细信息页面。为了实现这一点,有必要在显示它们的细节之前获取所有项目。

reactjs redux
2个回答
1
投票

修改 - 更新以反映您的上述回复。

我认为正确的方法是让您的州反映到达详细信息页面的可能方式。让fetchData()实际确定是否需要提取,并从父组件和子组件中调用它。

听起来你正在使用react-router或类似的方法 - 这种情况很常见。我建议您跟踪当前所选的id(如果您正在查看帖子列表,则不确定),然后在子项目可用时呈现它。

假设fetchData()是异步的,我不认为生命周期方法的顺序是真正的问题。


1
投票

因此,解决这个问题的方法是考虑您的组件正在做什么。您应该有一个主页,按标题和日期或您决定的任何内容列出帖子。然后,当您单击其中一个时,它将转到包含博客文章的页面。

所以你应该有一个PostList组件和一个Post组件。 PostList应该获取显示列表所需的所有数据。 Post应该获取所有数据以显示帖子。当你渲染PostList时,它不应该渲染任何PostPost只应在您发布帖子的URL时呈现。要获得这种行为,您需要一个像foundreact router这样的路由器。

现在可能会发现PostList正在获取Post需要显示每篇博文的所有细节。那样就好。您的州管理层应该检测到您已经拥有博客文章而不是获取它。这就是为什么你看到像fetchBlogPostIfNeeded这样的行为 - 调用该函数通常检查本地状态以查看博客帖子是否已经存在,如果是,它什么都不做。如果没有,它实际上取了它。

通过这种组合和适当的服务器端路由,您的博客应该支持在帖子列表或查看单个帖子时进行硬刷新。关键部分是您使用URL从列表转到帖子。要做到这一点,你将使用Link组件(发现和反应路由器都有一个与此相同的组件)。

© www.soinside.com 2019 - 2024. All rights reserved.