如何在 recompose 的 `withPropsOnChange` HOC 中使用状态？

Question

我想使用withPropsOnChange根据传入的props创建一个新的debounced函数。如果props改变了，它应该创建一个新函数。 withPropsOnChange 似乎非常适合这个，除了我需要在 createProps 回调中访问 this.state，而 recompose 不提供。

有哪些选择？即我如何创建一个属性（React 或 vanilla），它取决于/依赖于其他一些属性，并在这些属性更新时自动更新？

---

这是我现在所掌握的要点：

class MyClass extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            isLoading: 0,
            isWaiting: false,
            searchQuery: '',
            options: [],
            value: undefined, 
            highlightedValue: undefined,
            scrollPos: 0,
        };
        if(props.options) {
            this.loadOptions = Lo.debounce(searchQuery => {
                this.setState(state => ({
                    isLoading: state.isLoading + 1,
                }));
                props.options(searchQuery).then(result => {
                    this.setState(state => ({
                        isLoading: state.isLoading - 1,
                        options: result.options,
                    }));
                });
            }, props.delay);
        }
    }
}

如您所见，我定义了一个名为this.loadOptions 的属性，它只是props.options 的去抖动副本，并带有一些状态处理。

目前这可以正常工作，但如果上游修改了props.options 或props.delay，那么this.loadOptions 不会更新，因为我只在构造函数中执行此操作。

现在我可以在componentWillUpdate 中再次执行所有这些操作，但实际上我只想在更新props.options 或props.delay 时执行此操作，因为这是它仅有的两个依赖项。

我只是在寻找一种更简洁的设计模式来处理这类事情。现在我考虑它基本上只是“计算属性”（但我不能根据需要“重新计算”它——除非修改了这些属性，否则我每次都需要返回相同的实例）。

Answer 1

因此，据我了解，您有一些当前位于组件内部的状态。并且您想在 createProps 回调中使用该状态。

是否可以使用 recompose 来提取内部状态（及其逻辑），withState？

然后，如果您使用withState“开始”组合重构函数，则状态应该“进一步向下”作为道具可用。 （或者至少这是我的理解。）

const enhance = compose(
  // handle previously internal state
  withState('importantState', 'changeImportantState', 0),
  withHandlers({
    logicForChangingTheImportantState:
        props => () => props.changeImportantState(old =>  ({...old, moreImportant: 'xyz'}))
  }),
    // do your logic here
  withPropsOnChange(
    [], // ?? shouldMapOrKeys
    (props) => {
        return {
        thisPreviouslyDependedOnInternalState: props.importantState
      }
    }    
  ) 
);