javascript - 与 shouldComponentUpdate 一起使用时，react-native-draggable-flatlist 拖放重置

Question

我正在开发一个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
}

Answer 1

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

shouldComponentUpdate

您可以使用在 prop 更改反射(reflect)后触发的 componentDidUpdate 或在 prop 反射(reflect)之前触发的 componentWillReceiveProps

我建议使用componentDidUpdate，例如

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

}