使用React Hooks的问题
Lixucheng opened this issue · comments
在noform/repeater/factory.js文件中
async componentWillReceiveProps(nextProps) {
const { filter, asyncHandler, formConfig } = this.props;
const manualEvent = this.genManualEvent();
if (deepEqual(this.props, nextProps) && !manualEvent.type) {
return;
}
if (!deepEqual(asyncHandler, nextProps.asyncHandler)) {
this.repeaterCore.asyncHandler = nextProps.asyncHandler;
}
}
问题1:
deepEqual(this.props, nextProps)里面会有react节点,节点会有循环引用的情况, 导致deepEqual死循环, 推荐单独判断需要的字段而不是直接deepEqual
问题2:
使用reacthook之后方法的每次渲染都是一个新的
function OutputForm({ nodes }) {
const afterSetting = (event: any, repeater: any) => {
// use 变量nodes
};
return (
xxx
<InlineRepeater
multiple
asyncHandler={{
afterSetting,
}}
>
xxx
)
这里的afterSetting方法每次渲染都是一个新的,里面引用的变量nodes可能有变化,但是deepEqual并不能识别出来这是一个新的方法, 导致后面的新afterSetting无法正确设置this.repeaterCore.asyncHandler。所以afterSetting触发的一直都是第一次渲染的那一个afterSetting, 而第一次渲染的时候afterSetting方法里面使用的props.nodes是[]空的。
@Lixucheng
问题1 非常感谢帮助找到这个bug,现在着手去解决。
问题2 暂时没有太好的想法去解决,可能需要对hook做一些改造才能支持,欢迎提出建议。
看起来你已经非常熟repeater的代码了,如果有更好的想法,也欢迎直接PR
PS: 支持TS那个issue拖了很久,这阵子也会着手去开发,十分抱歉