Question

我想在名为＆＃39; update＆＃39;的处理程序中使用this.forceUpdate()。在我的撰写的withHandlers中。我正在使用重构来实现同样的目标。查找以下示例代码：

const abc = compose(
    withHandlers(
      update: () => () => this.forceUpdate()
    )
)

但它不起作用。有谁知道如何在重构库的 withHandlers 中使用forceUpdate()反应方法？

是否有任何替代方法可以获得与forceUpdate()相同的结果？

Answer 1

您在组件范围之外使用this，因此this未定义。

我不知道你想要实现什么，但你应该尝试另一种方式来实现它。

通常你应该尽量避免使用forceUpdate（）

Answer 2

生命周期中有forceUpdate。

我们这样使用它：

import { lifecycle } from 'recompose';

const listensForChangingModel = ( propName='model' ) => lifecycle( {
        componentDidMount() {
                this.onModelChanged = () => this.forceUpdate();

                this.props[ propName ].on( 'change', this.onModelChanged );
        },  
        componentWillUnmount() {
                this.props[ propName ].off( 'change', this.onModelChanged );
        },  
        componentDidUpdate( prevProps ) { 
                if ( prevProps[ propName ].cid !== this.props[ propName ].cid ) { 
                        prevProps[ propName ].off( 'change', this.onModelChanged );
                        this.props[ propName ].on( 'change', this.onModelChanged );
                }   
        },  
} );

export default listensForChangingModel;

这是一个高阶组件，当模型触发更改事件时会强制更新。

Answer 3

您可以使用withState来制作自己的props.forceUpdate，因为所有状态更新程序都会触发该组件重新渲染。

IE：

withState('_forceUpdate', 'forceUpdate')

然后随时随地致电props.forceUpdate()。

this.forceUpdate（）重构withHandler

3 个答案: