Question

我想使用withPropsOnChange根据传入的道具创建一个新的debounced函数。如果更改了道具，它应该创建一个新函数。 withPropsOnChange似乎是完美的，除了，我需要访问this.state回调中的createProps，而重组不会提供。{/ p >

有哪些替代方案？即，我如何创建一个属于某些其他属性的偶然/依赖的属性（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 赢得会更新，因为我＆＃39 ; m只在构造函数中执行此操作。

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

我只是在寻找更清洁的设计模式来处理这类事情。它基本上只是＆＃34;计算属性＆＃34;现在我考虑了它（但是我可以＆＃39;然后重新计算＆＃34;它根据需要 - 我每次都需要相同的实例，除非这些属性被修改）。

Answer 1

所以，据我所知，你有一些目前在组件内部的状态。并且您希望在createProps回调中使用该状态。

是否可以使用重构来提取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
      }
    }    
  ) 
);

我怎样才能在重构'withPropsOnChange` HOC中使用状态？

1 个答案: