问题标签 [react-lifecycle]

背景

我正在开发一个使用 ReactJS 作为渲染库的 Meteor 应用程序。

目前，即使父级正在访问更新的数据并据称将其传递给子级，我也无法在数据更新时重新渲染子级组件。

父组件是一个数据表。子组件是一个点击编辑日期字段。

它（理论上）的工作方式：父组件将日期的现有数据作为道具传递给子组件。子组件获取现有的道具数据，处理它并使用它设置一些状态，然后有 2 个选项：

• 默认值：显示数据
• 如果用户单击数据字段：更改为输入并允许用户选择日期（使用 react-datepicker），更改状态 - 当用户在字段外单击时，触发返回仅显示并将更新的数据从状态保存到数据库

我在表中每行使用两次子组件，每次使用时，它都需要访问数据库中最新的日期数据。因此，如果一个字段中的数据发生更改，则第二个字段应反映该更改。

问题

除非我手动刷新页面并强制子组件使用新数据呈现，否则第二个字段不会反映数据库中的更改。编辑的字段反映了数据的变化，因为它反映了状态中存储的内容。

阅读 React 文档后，我确信问题在于日期作为道具进入，然后作为状态处理 - 并且因为组件不会从道具更改中重新渲染。

我的问题

我该怎么做才能解决这个问题？

我对文档所做的所有阅读都强烈建议远离诸如 forceUpdate() 和 getDerivedStateFromProps() 之类的东西，但结果是我不确定如何让数据以我想要的方式传递。

想法？

我的代码

我已经对代码进行了一些缩写并删除了特定于我的项目的变量名，但如果有帮助的话，我可以提供更多的实际值。我认为我的问题比直接调试更具概念性。

家长

孩子

（如果这段代码/我的解释很粗略，那是因为我仍然是一个相当初学者/低级别的开发人员。我没有接受过正规培训，所以我在开发一个非常困难的应用程序时正在学习工作。作为一个独立开发者。说来话长。请温柔！）

在控制台中，我得到两个输出，一个是空数组，另一个是更新后的数组。我只需要在组件执行挂载功能后更新数组。我怎样才能消除第一个......

我希望能够在包装器组件的生命周期方法中将子代作为引用访问。这样我就可以跟踪以前的动画 domNodes 实例。但是每当我访问 refs 时，它们都会作为一个空对象返回。在生命周期方法中访问 refs 的 React 友好方式是什么？

我被我的应用程序的内存增量卡住了，因为它是单页，我什至无法重新加载它。在运行我的应用程序大约 5-6 小时后，内存大小从初始加载达到大约 600mb，即 120mb，我们为此做了一些修复，比如在 componentWillunMount() 中将 ref 设置为 null，并且在相同的测试后内存减少到 400mb同时，但我仍然可以看到有很多分离的元素，肯定是由代码的其他部分引起的，在我们可以从 chrome 内置功能中获取的快照文件中。那么有什么方法可以在离开特定页面的同时删除所有分离元素，或者为什么浏览器不将其从内存中删除，因为分离元素保留了一定大小的内存？

我真的不明白反应生命周期。我在 componentDidUpdate() 中运行 console.log 并看到它运行了多次 控制台显示 componentDidUpdate 运行了 3 次

我是 React 单元测试的新手。我对 if 语句有疑问。我需要测试 componentwillreceiveprops 的功能，我知道我可以使用 spy = sinon.stub(component.props,"componentwillreceiveprops") 方法让 spy 被调用。

但是在我的组件中，有一个 if 语句，比如

我可以componentWillReceiveProps调用函数。如果我删除 if 语句，也可以调用 setState 函数。但是我的组件中包含一个 if 语句，当我运行单元测试时它不会被调用。有什么方法可以调用这个 if 语句？先感谢您。

这是场景。我有一个父组件，一个子组件。父组件执行 ajax 调用并将数据下推给子组件。

当子组件接收到新数据时，在（子组件的）componentDidUpdate 中，我将重新设置其内部状态。

我想不出我需要在 componentDidUpdate （孩子的）内部检查的情况

prevState !== this.state

这是因为当我将新数据传递给子组件时，this.state 将等于 prevState（这将是旧状态，在接收新数据之前）；即在我运行上述 setState 之前，prev 和 current 状态将保持不变。

因此我的问题是，在什么情况下我需要检查 prevState != this.state ？

我必须componentDidMount在屏幕 A 中列出一组文件（图像），从这个屏幕 AI 有另一个屏幕 B 链接，我可以在其中查看文件的详细视图，并且可以选择删除文档。

当使用调用屏幕 A 时

componentDidMount工作正常，但是当我在取消链接回调中删除文件（我正在使用 react-native-fs）时，我正在调用导航

重定向到屏幕 A 可以正常工作，但componentDidMount无法正常工作，这意味着我仍然可以在列表中看到已删除的文件。即屏幕A不刷新，有什么可能的解决办法吗？

我目前正在this.props.navigation.navigate('myView')使用react-navigation执行。

但是当我离开并快速进入该视图时，在某些情况下，在react-native 生命周期中会发生奇怪的行为。

我的日志：

*正常工作时：

*当我快速导航时：

在这种情况下，卸载正在运行并使视图处于不正确的状态。

我正在使用 MongoDB 作为托管在 heroku 上的数据库来构建登录。在我的数据库中更新我的登录用户的属性后，我想更改我的组件的值。

这是我的功能，它更新我的用户的“信用”：

//ProgressMobileStepper.js

它被同一文件中按钮的 onClick 事件触发！

这是我的组件（其他文件），它应该在更新我的用户的信用后立即重新呈现工具栏：

//ItemViewAll.js

这是用户的json（不知道是否有帮助）：

//MongoDB

如果您对在 ItemViewAll.js 的工具栏中单击按钮更新我的用户积分后如何更改渲染有任何建议，我将非常感谢！

干杯和圣诞快乐！

马丁

编辑

这是我的子组件与工具栏的渲染：