alibaba / alist

Alibaba Group Unified List Solution.

Home Page:https://alist.wiki

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

使用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拖了很久,这阵子也会着手去开发,十分抱歉