react-native-draggable-flatlist drag/drop 与 shouldComponentUpdate 一起使用时重置

Question

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

请帮助我提出一些建议，使 drag/drop 与 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 不用于 sideEffects.It 用于减少道具更改的渲染计数以提高性能。 shouldComponentUpdate should return true 或 false 决定组件是否应该重新渲染。

shouldComponentUpdate

你可以使用 componentDidUpdate 在 prop 变化反映之后触发或 componentWillReceiveProps 在 prop 反映之前触发

我推荐使用componentDidUpdate喜欢

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

}

Answer 2

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

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

react-native-draggable-flatlist drag/drop 与 shouldComponentUpdate 一起使用时重置

react-native-draggable-flatlist drag/drop reseting when used with shouldComponentUpdate

javascript

user-interface

react-native

react-redux

react-native-draggable-flatlist