- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试从 componentWillReceiveProps 转移到 getDerivedStateFromProps ,在某些情况下,我是成功的,但是当案例是将 Prop 附加到现有状态时,事情开始变得不一样了。当对组件的状态进行更新时,状态会发生变化(并且组件在更新后也会发生变化),但仍会呈现先前的状态。使用 getDerivedStateFromProp 而不是 componentWillReceiveProps 时会发生一些奇怪的事情。 似乎该方法不能很好地处理“内部”更改。在下面的示例中,我在 Child 上有 getDerivedStateFromProp 并且它可以工作,但因为只是渲染 Prop 。在一个更简单的示例中也观察到了这种行为,其中我没有任何子组件并且只是呈现状态更改。
下面的代码显示了一个子组件,用于打印/显示 props 接收到的数据,同时使用删除数据处理程序(从子组件交互中删除存储在 Parent 的数据)。使用 getDerivedStateFromProps()
时我无法访问 this.state
并且 prevState 并不意味着相同,因为状态是累积的。当我从子组件中删除数据时,不会更新子组件的 Prop (使用 componentWillReceiveProps 时可以)。所以,我找不到替代我的 UNSAFE_componentWillReceiveProps
的方法。
组件WillReceiveProps:
UNSAFE_componentWillReceiveProps(nextProps){
this.setState({
data: [...this.state.data,...nextProps.data]
})
}
getDerivedStateFromProps:
static getDerivedStateFromProps(nextProps,state) {
if (!isEqual(nextProps.data, state.data)) {
return {
data: [...state.data, ...nextProps.data]
};
}
return null;
}
按预期工作的原始代码(在父组件上的 getDerivedStateFromProps 之前)
export class DataConsole extends Component {
// Used for unsubscribing when our components unmount
unsub = null;
static defaultProps = {
data: [],
};
constructor(props) {
super(props);
this.state = {
data: [],
};
this.handleTableRowClick = this.handleTableRowClick.bind(this);
}
UNSAFE_componentWillReceiveProps(nextProps){
this.setState({
data: [...this.state.data,...nextProps.data]
})
}
handleTableRowClick(key) {
console.log(
"handleTable",
key,
this.state.data[key],
this.state.data.length
);
const e = this.state.data.splice(key, 1)
//console.log("remove?", e , this.state.data.length)
this.setState({
undoDataRemove: e
});
}
render() {
return (
<div>
<Container
fluid
style={{ paddingLeft: 0, paddingRight: 0 }}
className="DataContainer"
>
<Row noGutters>
<Col sm={8} className="ConsoleTable">
<div>
<DataViewer
data={this.state.data}
rowClickHandler={this.handleTableRowClick}
/>
</div>
...
DataViewer - 子组件
import isEqual from "react-fast-compare";
...
export class DataViewer extends Component {
static defaultProps = {
data: [],
};
constructor(props){
super(props)
this.state={data: []}
}
componentDidUpdate() {
console.log("DataViewer updated");
}
static getDerivedStateFromProps(nextProps, prevProps) {
console.log(nextProps, prevProps)
if (!isEqual(nextProps.data, prevProps.data)) {
return {
data: nextProps.data
};
}
return null;
}
render() {
return (
<div className={"TableData"}>
<Table responsive="lg" striped borderless hover>
<tbody>
{this.state.data.map((elem, ids) => {
if (!isEmpty(elem)) {
return (
<tr key={ids} onClick={() => this.props.rowClickHandler(ids)}>
<td>{ids + 1}</td>
{Object.keys(elem).map(function (value, idx) {
return (
<td key={idx}>
{value}:{elem[value]}
</td>
);
})}
</tr>
);
} else {
return null;
}
})}
</tbody>
</Table>
</div>
);
}
}
最佳答案
您的代码中存在导致您的问题的错误,它与 getDerivedStateFromProps
无关和 UNSAFE_componentWillReceiveProps
.
故障线是这样的:
const e = this.state.data.splice(key, 1)
它改变了
this.state.data
无需调用
setState
.永远不要那样做。唯一允许您对
this.state
进行任何更改的方法通过
this.setState
或者通过从
getDerivedStateFromProps
返回要合并到状态的东西,而不是任何其他方式。
immer
,可以修改
state
任何你想要的方式,只要你把它包装成
produce
使用模式
this.setState(produce(this.state, newState => { /* change newState here */ }))
调用:
import produce from 'immer';
// ...
this.setState(produce(this.state, newState => {
const e = newState.data.splice(key, 1);
newState.undoDataRemove = e;
}));
希望,这可以提供帮助。
关于javascript - 为什么 getDerivedStateFromProps 不允许使用状态更新重新渲染? componentWillReceiveProps 不是问题 - ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67527000/
我已经阅读了reactjs.org上有关getDerivedStateFromProps的文档。我看过用例。我明白为什么要使用它。 但我无法弄清楚它如何处理返回值。因此我的问题是,当它返回时.....
我使用 React 16.3.1 和 next.js。 我将 getDerivedStateFromProps 放入扩展 PureComponent 的类中。 这是代码: Header.js impo
在此示例中 https://codepen.io/ismail-codar/pen/QrXJgE?editors=1011 class Counter extends React.Component
如何在静态 getDerivedStateFromProps 中调用组件函数? 这是我的代码 class Box extends Component { updateVariables() {
根据这篇关于 what's news in React 16.3 的帖子,在下一次更新中 componentWillReceiveProps 将有一个替代品,即 getDerivedStateFrom
从API和React架构设计的角度来看,是否有任何问题使其静态化? 最佳答案 Making certain lifecycles static to prevent unsafe access of
如何比较数组中的状态?我无法使用 !== 或使用 .length static getDerivedStateFromProps(props, state) { if(props.langua
我正在探索 React,但对生命周期方法和父子通信有些困惑。具体来说,我正在尝试创建一个组件,它包装一个选择元素并在选择“其他”选项时添加一个输入框。我已经使用 getDerivedStateFrom
我是 React 的新手,只是一个关于在 getDerivedStateFromProps 生命周期方法中访问静态属性的问题,下面是我的代码: export default Child extends
在 React 组件中使用 getDerivedStateFromProps 生命周期方法时,返回的状态是完全覆盖组件的现有状态,还是只是更新返回的特定状态属性?例如, class foo exten
我在最新的 React 16.5.2 中使用 getDerivedStateFromProps 生命周期钩子(Hook)。为什么我无法访问组件的 this 对象?我做错了什么吗? class Emai
我还没有研究静态 getDerivedStateFromProps,所以我试图了解它。 我知道 React 通过引入一个名为 static getDerivedStateFromProps() 的新生
componentWillReceiveProps 和 getDerivedStateFromProps 到底是什么对我来说是个微妙的问题。因为,我在使用 getDerivedStateFromPro
我正在更新一个遗留组件,它使用: shouldComponentUpdate() 以避免昂贵的状态重新计算 componentWillUpdate() 进行重新计算并在 1 通过时呈现 docs说 i
我正在将一个类组件转换为一个函数组件,并想看看 useEffect()可以替换以下静态函数 static getDerivedStateFromProps(props) { const { p
getDerivedStateFromProps is being added as a safer alternative to the legacy componentWillReceivePro
如 this React Github issue 中所读我看到越来越多 the cost of render() is relatively small 在 React 16.3 中,我想知道为什么
我想将状态变量 books 设置为 API 的结果。我无法在 componentDidMount 中执行此操作,因为我一开始没有 token ,需要它从 API 获取结果。当我运行以下代码时,状态bo
我对 getDerivedStateFromProps 如何与 Mobx 可观察对象有一些误解。我知道,Mobx 对“读取”属性(通过“点入”)、可跟踪函数等使用react。 例如,我存储了可观察对象
我不明白,为什么当我尝试在 getDerivedStateFromProps 方法中启动函数 getTodosList - 它总是向我返回 TypeError - Cannot read proper
我是一名优秀的程序员,十分优秀!