Question

该组件接收对象列表作为prop。我想无限滚动地显示它。它的状态为“ curNum”，这是当前要显示的项目数。向下滚动时，“ curNum”会更改，因此将根据“ curNum”对项目列表进行切片。

对象列表将由父组件更新，并且“ curNum”应重置为初始值。

使用componentWillReceiveProps我可以做到：

componentWillReceiveProps(newProps) {
  this.setState({
  curNum: initNum,
 });
}

但是如何使用getDerivedStateFromProps重写它？我读到即使状态改变，新方法也会被触发。那么我怎么知道我正在接收新道具呢？

我是否必须将列表的副本镜像到状态，然后深入检查每次对象列表是否相等？

Answer 1

道具更改时，有几种方法可以用来更新状态

使用getDerivedStateFromProps：请注意，它建议您避免使用此方法，因为在每次更新和初始渲染时都会调用此方法，而不仅仅是在Parent组件重新渲染或道具更改时调用此方法。但是，如果要使用它，则还需要存储prevState

代码：

static getDerivedStateFromProps(props, state) {

  if (state.prevCurNum !== props.initNum) {
     return {
         currNum: props.initNum,
         prevCurNum: props.initNum
     }
  } else {
      return { prevCurNum: props.initNum }
  }
}

从构造器中的道具分配状态并将关键道具控制到组件

代码

<MyComponent key={this.state.initNum} initNum={this.state.initNum} />

和在MyComponent中

constructor(props) {
    super(props);
    this.state= {
       currNum: props.initNum
    }
}

在上面的示例中，如果prop initNum发生变化，则组件的键将发生变化，这将导致组件重新挂载并调用其构造函数

第三种方法是在渲染中使用备忘录，但是当状态是从道具的复杂计算派生出来且不应在本地更改时，它最有用。

如何在我的组件中使用getDerivedStatefromProps

1 个答案: