问题标签 [getderivedstatefromprops]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
51 浏览

reactjs - 为什么功能不会在道具中更新?

我有一个表格,我在其中输入数据并提交表格。然后我想显示数据。我使用道具调用该函数。但由于某种原因,该功能不会在道具中更新。

行动:

减速器:

这是主要代码:

0 投票
1 回答
734 浏览

reactjs - 用 getDerivedStateFromProps 返回一两个对象?

我的组件接收profileerrors来自父级。如果组件从父级接收到新数据,则在组件static getDerivedStateFromProps集中设置新状态。

上面的代码阻止profile对象显示在页面上。当。。。的时候

部分被注释掉profile数据显示正常,但errors数据无法显示。

如何同时显示errorsprofile对象?在我的组件上提交组件字段数据提交给父级,因此如果所有必填字段都不为空,则不应errors进入。

完整的 repo 位于https://github.com/ElAnonimo/DevConnector/blob/master/client/src/components/common/ProfileForm.js

更新 1

父组件EditProfile

0 投票
2 回答
4557 浏览

reactjs - getDerivedStateFromProps 真的会更新状态吗?

我已经阅读了 reactjs.org 上关于 getDerivedStateFromProps 的文档。我看过用例。我明白为什么要使用它。

但我无法弄清楚它如何处理返回值。因此我的问题是,当它返回时......它去哪里了?

它没有设置状态,因为它无权访问它。

要设置状态,需要使用 componentDidUpdate 并查找更改,然后设置状态。

假设以下代码:

那么 React 对这个返回 ^ 做了什么?

然后我可以在 componentDidMount 上设置状态。但这似乎与 getDerivedStateFromProps 没有任何关系。此外,此生命周期方法每次都会触发。它会强制重新渲染。

getDerivedStateFromProps 的返回在什么时​​候起作用?

更新:如果如上正确配置,此生命周期方法实际上将更新状态。您不需要额外的方法来设置状态

0 投票
1 回答
1253 浏览

reactjs - React Hooks 常见问题解答:getderivedstatefromprops 的实现导致渲染状态不连贯

恕我直言,来自React Hooks FAQ #getDerivedStateFromProps的建议 导致第一次渲染的值与 的值row不对应isScrollingDown。由于调用setIsScrollingDown只安排新的渲染并且不影响当前渲染,后者将使用新值row和旧值执行isScrollingDown

此行为不等同于getderivedstatefromprops允许row和之间的连贯性的组件类的静态方法isScrollingDown

为了保证连贯的渲染,不应该使用以下代码更新示例吗?还是我错过了什么?

谢谢 !

0 投票
1 回答
1355 浏览

javascript - 如何在 ReactJS 中调用 getDerivedStateFromProps 中的方法?

我的 React 类中有一个方法,例如someMethod()。我也有一个getDerivedStateFromProps()我想调用的方法someMethod()。是的,我需要这样做getDerivedStateFromProps而不是componentDidUpdate()例如,因为我确实更改了someMethod().

我希望worked显示日志。

0 投票
2 回答
711 浏览

javascript - 将新道具合并到状态的正确方法

我目前正在使用 react-big-calendar 开发日历组件。

我目前有一个 Wrapper,它从数据库中提取数据并将其发送到日历组件中。但是,我正在开发一项功能,即可以从任何地方“发送”日历事件到该组件。

目前我只有用例,它来自网站的内置通知系统,将有一个功能可以将作为通知发送的外部事件添加到您自己的日历中。但是,我可能想通过我的套接字服务器(socket.io)将事件从另一个 Web 应用程序推送到用户日历。

我不确定在技术上做出反应的“正确”方法是什么。

我现在的做法是我添加了

在我的 CalendarWrapper 中,它基本上为我做了以下事情:1)我更新发送到包装器的道具,无论是从父组件还是从 redux 存储(我将使用第二个)2)这会触发 getDrivedStateFromProps 并检查它是否收到propInput 为 true,如果是这种情况,它将作为 props 向下发送的新事件合并到日历的当前事件中。3) 然后它运行一个回调函数 (nextProps.reset()),将 propInput 重置为 FALSE,这会触发 getDrivedStateFromProps 的另一次运行,但这次返回 null 并且不会导致新的 setState。

这是我自己设想的如何将新事件从 redux 商店推送到这个日历包装器的解决方案。这似乎很不正统,但对我来说,这是与纯 redux 和一切保存在 redux 中的中间立场并拥有每个组件的本地状态的唯一方法。

有没有一种技术上更好、更高效的方法来解决这个问题?

提前致谢。

0 投票
1 回答
84 浏览

reactjs - getDerivedStateFromProps 中的状态更新是否与渲染同步?

由于在每次getDervivedStateFromProps渲染之前调用,我假设状态保证在渲染之前同步更新(即它不会像正常调用那样与其他调用进行批处理?)setStatesetState

换句话说,发生的任何更新getDerivedStateFromProps都保证反映在以下render

0 投票
3 回答
168 浏览

javascript - React 16.4 - 手动表单输入填充以及来自 getDerivedStateFromProps 的更新?

一旦更新React 16.4getDerivedStateFromProps ,我就会遇到一个问题,我们在逻辑上有一些重大变化。现在,它会在传入自己组件的 props 上的每个组件更新时触发。

所以,我已经阅读了文档和手册,但仍然无法弄清楚表单输入字段应该基于传入的道具(controlled component)并且同时能够通过用户自己的输入进行修改的情况?

我也试过这篇文章,但它只涵盖了一次性更新的案例,而不是手动输入案例:Why getDerivedStateFromProps is called after setState?

这是我要重现的小代码:

0 投票
1 回答
276 浏览

javascript - 在 getDerivedStateFromProps 内部调用 API 后返回状态

我有一个反应组件,它接收从其父级过滤的道具。当父道具更改时,我getDerivedStateFromProps在以下代码中使用子道具:

在控制台中,response.data日志是适当的对象数组。但是状态不会更新,渲染函数仍然使用旧cards数组,而不是从ApiService响应中接收到的数组。如何使cards数组正确更新,以便在下一次渲染时显示过滤后的卡片?

0 投票
2 回答
2404 浏览

javascript - getDerivedStateFromProps 返回未定义

目前是第一次使用 getDerivedStateFromProps。我的代码可以正常工作,并且可以执行我希望它执行的操作,但是我在控制台中收到了一条警告,这让我感到困惑,因为我的代码正在运行。警告:“getDerivedStateFromProps():必须返回有效的状态对象(或 null)。您返回了未定义的。” 有没有更好的方法来编写 getDerivedStateFromProps 以消除控制台中的警告?