问题标签 [getderivedstatefromprops]

所以刚刚了解到它componentWillReceiveProps已被弃用，我们现在需要使用getDerivedStateFromProps生命周期方法。 https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

我在下面这样使用它：

但是它在setState

main.js:30 未捕获的类型错误：无法在 getDerivedStateFromProps (main.js:30) 处读取 null 的属性“setState”

我在这里想念什么？

我有一个IFrameComponent组件，受这篇文章的启发。

它看起来基本上是这样的：

现在这componentWillReceiveProps被认为是不安全的，我正试图摆脱它。

React 建议重构 componentWillReceiveProps的方式基本上要么使用static getDerivedStateFromProps要么componentDidUpdate

可悲的是，componentDidUpdate永远不会被调用，因为shouldComponentUpdate返回 false （我认为这很好？）而且我无法在静态方法中访问 this.iFrame 引用getDerivedStateFromProps。

如何重构这段代码？

React 引入了新的静态方法getDerivedStateFromProps(props, state)，该方法在每个渲染方法之前调用，但为什么呢？在道具更改后调用它对我来说很有意义，但在setState它没有意义之后，也许我错过了一些东西。

我正在根据我的公司要求创建一个datePicker组件，组件日期由道具控制。我在组件中有以下状态。

selected 表示从 date 属性派生的选定日期，currentMonth并currentYear表示当前日历视图中的月份和年份。

如果datefrom prop 发生变化，selected*则应相应更改。为此，我正在使用但假设用户单击月份名称，这会将日历视图切换为月份（而不是显示月份的日期名称），该函数使用 setState 对此进行更新，但日期属性与之前（包含上个月）应该被调用，并且 currentMonth 再次与之前相同，而不是改变。currentMonthcurrentYeargetDerivedStateFromPropscurrentMonthgetDerivedStateFromProps

是的，我创建了一个额外的变量state来跟踪是否getDerivedStateFromProps被调用，setState但我认为这不是正确的方法。

要么我做错了什么，要么遗漏了什么，要么getDerivedStateFromProps不应该被调用setState。可能我做错了什么。

我无法static在连接到 Redux 的类组件中使用方法。打字稿报告

容器：

组成部分：

这@types/react-redux是不是最新的问题还是我这边的问题？当我注释掉

方法，一切正常...

我正在使用 Redux 创建一个 React 应用程序，在我的帐户设置页面上，我有一个表单，我希望预先填充用户的信息，然后让他们能够编辑字段并更新他们的个人资料。我的代码如下：

this.props.getCurrentProfile() 向 mongoDB 发送 axios 请求，接收当前用户的 profile。

问题是如果我使用 getDerivedStateFromProps 方法，文本字段是静态的，无法编辑。即使使用 componentWillMount 方法，如果我从浏览器刷新页面说配置文件为空，我也会收到错误消息。

我对 React 和生命周期方法非常陌生，非常感谢任何关于我做错了什么以及为什么 componentWillReceiveProps 被弃用的反馈。

提前致谢

只是想知道是否有人可以查看我在沙盒上的代码来帮助我解决我一直在努力解决的问题。

选择列表

• 显示要添加到列表的选项的完整列表

• 显示预选选项（值 > 0 的项目）

• 数据更改时更新，在带有按钮的代码沙箱上模拟

• 删除 Item，item 对象也需要留在 item 数组中，值设置为 0

• 项目应该只删除一个按钮的onClick，（如果用户在输入中键入删除数据，我的版本会删除）

• 添加项目列表应保持其原始顺序

非常感谢任何帮助，

谢恩

我想知道拥有“胖”gDSFP 功能是否是不好的做法。目前，我有一个组件可以接收一些数据并进行大量数据操作

并且在此过程中，如果遇到错误条件，它会返回一个新的错误状态片

在完成所有数据操作并返回我的组件需要的 derivedState 之前，这会重复几次。我很好奇社区对“胖”gDSFP 功能的看法。我的组件仅在外部数据源发生更改并且需要派生新状态时才运行 gDSFP，因此我看不到该逻辑还能存在于何处。

我正在尝试将 - 从父组件传递到子组件 - 一些数据作为道具，我想将此道具设置为初始状态。

我没有收到任何错误，但如果我console.log this.state.name什么也没得到。或者当我在 chrome-s react add-on 中检查它时，我可以看到道具值，但状态仍然存在""。

我也试过用getDerivedStateFromPropsin对其进行排序componentDidMount，我可以用它来设置它，但是它不允许我稍后改变状态......为什么？！有什么问题？

我创建了一个 React View，比如说MyView，它有 2 个文本输入，其初始值将由从数据库读取的父级传递。

我还希望将更改的值保存回数据库。因此，视图也传递了一个相同的回调函数。

考虑到数据库保存操作很繁重，您不应该经常这样做。因此，我决定收听onBlur事件，而不是在每次击键时调用onChange的输入框上的事件。onChange

第一种方法：

但是，这不起作用，因为React强制受控输入（带有value属性）始终伴随有onChange侦听器。

第二种方法：

因此，我尝试将这些输入设置为uncontrolled. 也就是说，value使用 代替属性defaultValue。

但这也不起作用，因为单击重置/清除按钮，虽然视图被重新渲染，但defaultValue一旦创建视图就不会更新。

第三种方法：

所以，我最后添加了一个onChange监听器，但没有操作。

同样，这不起作用，因为视图在调用后重新呈现，onChange并且由于尚未反映值props，因此value似乎在每次击键时都重置回初始值。

第四种方法：

最后我尝试的是维护一个state组件并从状态中读取值，并在每次onChange将值保存回状态时。这在很大程度上是有效的，但是每当道具发生外部更改并且视图被重新渲染时，state都不会更新。所以，我添加了一个getDerivedStateFromProps功能来查看：

现在，这又不起作用了。原因是即使我暂时将值保存到状态并且状态已重置为道具中的初始值，也会调用此函数。

一些 ReactJS 专家可以帮助我解决我的用例吗？

我无法确定我的组件层次结构是否真的需要getDerivedStateFromProps，如果需要它的情况真的像文档所说的那样罕见。这可能是对 React/Redux 设计的根本误解。

我有一个父组件AttributeList，它呈现一堆Attributes，它们本质上是键值对。AttributeList接收文档的属性列表作为道具。但是，可以编辑属性，因此它this.state.attributes用 初始化其状态 ( ) this.props.attributes。通常键是不可变的，但如果用户向列表中添加新属性，他可以同时编辑键和值。在任何时候，用户都可以保存所有属性。保存新属性后，我也想禁用编辑它们的键。这是两难的。

选项一是保存文档并希望它有效，然后清除新属性列表并将所有属性标记为已保存（禁用键输入）。我认为这将是“完全不受控制”的解决方案，一旦状态被初始化，组件就会自行处理所有事情。但是，如果保存失败怎么办？我不想向用户显示不正确的状态。

所以我想做选项二。保存后，获取文档，这将加载属性列表并重新渲染组件。但是我需要摆脱我的新属性，因为它们现在是attributes道具的一部分。我想验证新属性现在实际上是attributes道具的一部分。似乎这会发生在getDerivedStateFromProps我在每个渲染周期检查attributes道具中是否已经存在任何新属性键的地方，如果存在，则将它们从“新”列表中删除，并返回该状态。

但这真的是使用的正确时间getDerivedStateFromProps吗？在我看来，对于用户正在“编辑”某些内容的任何页面，如果您想根据保存的数据（“真相”）进行渲染，那么我需要使用getDerivedStateFromProps. 或者从设计的角度来看，最好显示类似于“数据未成功保存”的消息并保持状态不变，以防止任何数据丢失。老实说，我不确定。