reactjs - 在上下文中解决 setState 问题（react-native）

Question

我正在渲染很多 Text 组件并保存位置（以便滚动到它们），但我想通过去抖动“捆绑”它来提高性能（并且愿意接受其他可以提高性能的建议）。

  ...
  import debounce from 'lodash/debounce'
  ...
  class ContextProvider extends Component {
  ....
  setContentPosition = (layout, key) => {
    const contentPos = { ...this.state.contentPos }
    contentPos[key] = layout.nativeEvent.layout.y
    // TODO: make it debounce https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
    this.setState({ contentPos }, () => console.log('contPos updated'))
  }
  ...
  render() {
    return (
      <Provider
        value={{
          setContentPosition: this.setContentPosition,
        }}
      >
        {this.props.children}
      </Provider>
    )
  }
}

我尝试了几种不同的组合，但没有运气。期待这能奏效：

  ...
  render() {
    return (
      <Provider
        value={{
          setContentPosition: debounce(this.setContentPosition, 200),
        }}
      >
        {this.props.children}
      </Provider>
    )
  }
}

它抛出以下错误：

更新01

以下更改（对于contentPos[key]）

  setContentPosition = (layout, key) => {
    const contentPos = { ...this.state.contentPos }
    //console.log(layout.nativeEvent)
    contentPos[key] = layout.nativeEvent
    // TODO: make it debounce https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
    this.setState({ contentPos }, () => {
      console.log('contPos updated')
    })
  }

改为显示此警告：

该位置用于滚动到文本组件（搜索时），我有一些滚动到某个Text组件的测试代码 - 适用于 iOS 但不适用于 Android？

标签： reactjsreact-nativeecmascript-6lodashdebounce