问题标签 [react-lifecycle]

因此，我有一个登录页面，可将用户定向到配置文件页面，在该页面中发出异步请求，检索在 componentDidMount 事件中启动的用户 ID 号。一旦我得到结果，我就用检索到的数据在 id 上设置状态。

我正在努力做到这一点，以便某人不能只在 url 中键入“/profile”路径并被带到个人资料页面。为此，我尝试根据是否从正确的登录身份验证中检索到 id 进行条件渲染。这就是为什么如果您注意到

如果用户不提供电子邮件和密码，这会将用户重定向回登录页面。我已尝试确保我的配置文件组件在收到数据后安装和卸载，但我仍然不断收到错误消息：只能更新已安装或正在安装的组件。当组件“卸载”时我很困惑。

我有一个 onClick 函数可以更改类名的状态，因此可以显示和隐藏我拥有的一些样式。该按钮在第一次单击时工作正常，但之后无法再次单击。

如下所示，我的组件连接到我的 redux 商店。我创建了 handleClick 函数来调用我在操作中显示的 actionCreator。我希望 onClick 函数在每次单击时触发，并将处于我状态的单击更改为与以前相反的状态。我是否错过了在某处使用以前的状态？当我应该复制状态时，我是否直接改变了我的状态？无论如何，希望这个问题是有道理的。

编辑：我发现当我单击按钮时，单击状态保持不变，不知道为什么它没有切换。

我的组件是一个包含主要和次要导航的标题。到目前为止，我只处理主要导航，它在网站的大部分区域之间进行选择。状态提升到主 Header 组件，而 UpperMenu 组件仅接收事件侦听器和活动链接 ID 作为道具。

问题在于，虽然状态更改正确进行，但在执行挂载时，状态会更改回初始值。这会导致 CSS 中的“闪烁”，这意味着视图被正确呈现，并且在片刻之后它会回到被选择的初始链接。我不知道什么可能导致这种行为，并希望得到帮助。

页眉.js：

UpperMenu.js：

PS我试图调试生命周期以确定发生这种情况的时间点，问题从componentDidMount开始。

我正在开发一个反应应用程序，我想根据某些条件阻止我的组件卸载。

据我研究，我发现了一个使用反应路由器的 setRouteLeaveHook 选项（如此处所述）。但问题是我有相同的路线，即两个组件的 url 相同。我也没有 this.props.router 选项或 this.context.router 选项，我可以通过它。

有什么我可以做的吗？

我的目标是渲染一个子组件而不重新渲染它的父组件。

因此，例如，App 的状态作为道具直接传递给 Column 组件，但 Column 是 Table 的子组件，并且 Table 已ShouldComponentUpdate设置为 false（例如，表数据没有更改..）。

问题..如果应用程序状态发生变化，列组件不会更新..除非在表组件上ShouldComponentUpdate设置为true..这有什么问题吗？

文档确实说

返回 false 不会阻止子组件在其状态更改时重新渲染。

但没有提到他们的道具是否改变..

出于测试目的，我在这里创建了一个演示https://codesandbox.io/s/k2072rkp7o

代码预览：

当我的组件挂载时，我需要从 API 请求它的内容。在文档中：

在安装组件后立即调用 componentDidMount()。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是实例化网络请求的好地方。

它如下：

在此方法中调用 setState() 将触发额外的渲染 (...) 请谨慎使用此模式，因为它通常会导致性能问题。

向 API 发出请求并立即使用响应设置状态的最佳做法是什么？

我会尽量让这个尽可能简短和甜美，同时详细和描述性。当我的应用程序第一次初始化或加载时，它会api调用来获取一些blog数据。这或多或少是这样的：

如您所见，api成功返回blogPosts. blogPosts然后我使用库中createStructuredSelector的另一个组件在另一个组件中引用这些。reselect这是代码：

这些选择器方法的作用是检查 props 位置路径名 end slug 并使用它来迭代和排列以getBlogItem在. 然后将它们设置为命名的道具并传递给要渲染的道具。该演示组件看起来像这样：getFollowingBlogItemsRedux State StoreblogItemblogItemspresentational component

此演示组件的底部是一些链接，它们将更改 slug 名称。因此，如果我在localhost:3000/blogPosts/blog-post-0并且单击底部的三篇博客文章之一，它会将 url 更改为localhost:3000/blogPosts/blog-post-1or blog-post-2、blog-post-3等。底部的这些博客文章是来自的链接，react-router-dom代码是这样编写的：

所以想法是它改变了 url 的 slug 并呈现适当的博客文章。然而，这不是正在发生的事情。url slug 确实发生了变化，我什至可以在其中看到container component道具也更新和变化。位置路径名从blog-post-1变为blog-post-2。那么我的问题是为什么我的组件不重新渲染？我知道 的生命周期方法componentWillReceiveProps，但我不知道如何将它与createStructuredSelectorfrom之类的东西结合使用reselect。任何可能给我一条关于我应该如何处理这个问题的明确途径的人将不胜感激！

我正在为 freecodecamp 制作一个 WeatherApp。我已经创建了一个父类来获取地理位置，然后将坐标值传递给 Fetch.js，问题是当我运行程序时，控制台显示 Fetch 可能首先被执行，

即，在控制台上，首先数据显示 Fetch.js 的空对象，然后控制台显示我在 Geolocation.js 中打印的地理位置

父类：Geolocation.js

获取.js：

在 React 生命周期函数shouldComponentUpdate(nextProps, nextState)中，nextProps 是不言自明的。

但是 nextState 是做什么的呢？

在决定是否应该渲染/修改组件之前，我可以评估即将到来的状态，这听起来是不对的。

我想我在这里缺少一个关于 React 和 Redux 的概念。我正在尝试使用存储在 redux 中的对象，但遇到了麻烦。

REDUX：我有一个操作 fetchItems，它从数据库中获取所有项目。此操作成功。

反应：我有一个容器 UserProfile，它在 componentDidMount 中调用 fetchItems。

我看到的问题是 this.props.items 始终为空（即使 fetchItems 成功）。我可以检测到项目存储在 redux 存储中的唯一方法是使用 componentWillRecieveProps(nextProps)。在这里，我成功看到了 nextProps 中的项目。我觉得使用 componentWillReceiveProps 可能太“杂乱”了。我想我要问的是，在反应中处理 redux 状态更新的标准方法是什么？

阿塞尔