2

我正在开发一个 react-native 应用程序，我在其中一个列表中使用 react-native-draggable-flatlist 不幸的是我必须在组件中使用 shouldComponentUpdate 来处理来自另一个组件上的其他列表项的数据，但是在添加之后shouldComponentUpdate，我的拖放不起作用，我可以拖放，但它会立即将整个列表重置为原始定位设置。

请帮助我提出一些建议，以使拖放与 shouldComponentUpdate 一起工作，因为我不想破坏现有功能

代码

<DraggableFlatList
 scrollPercent={5}
 data={testData}
 renderItem={this.renderItem}
 keyExtractor={item => `item-${testkey}`}
 onMoveEnd={({ data }) => {
   this.setState({ data });
 }}
/>

public shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.data.length !== nextState.data.length) {
     this.setState({
       data: nextProps.data
     })
   }
   return true
}
4

2 回答 2

1

shouldComponentUpdate不适用于执行副作用。它用于减少道具更改的渲染计数以提高性能。shouldComponentUpdate 应该返回 true 或 false 来确定组件是否应该重新渲染。

应该组件更新

您可以使用componentDidUpdate哪些在道具更改后触发反射或componentWillReceiveProps哪些在道具反射之前触发

我建议使用componentDidUpdate喜欢

componentDidUpdate  = (prevProps, prevState) => {
  if (this.props.data.length !== this.state.data.length) {
     this.setState({
       data: nextProps.data
     })
   }

}
于 2020-03-06T15:56:00.310 回答
1

您不应该shouldComponentUpdate为此目的使用。如果你只是复制props.data到state.data，为什么不直接使用props.data呢？

如果绝对有必要在每次更新时进行复制，那么请考虑使用另一种生命周期方法，例如componentDidUpdateor getDerivedStateFromProps。您也可以使用componentWillReceiveProps，但它已被弃用，应该避免使用。

于 2020-03-06T15:56:34.617 回答