中英文切换，不同数量下的卡片hover展示不全的问题

记录：

一、问题场景

组件中有默认四个卡片，鼠标移入移出有动画效果，该组件有中英文两种模式，在不同模式下设置的卡片数量是不同步的，卡片数量：4、5、6。现在中英文各自模式下卡片数量不一致，在切换中英文时，非默认4卡片的卡片无法正常hover展开。

二、效果图

三、问题定位

不同模式下的卡片数量不同，而脚本却是同一份，所以缓存起来的卡片数量对应不上，hover没效果

四、代码

1、如何添加卡片

  const handleCardNumChange = (val: ICardNumItem) => {
    onChange(
      (draft) => {
        const cardSize = draft.cardList.length;
        const offset = val.value - cardSize;//变化的卡片数量
        if (offset > 0) {//若卡片增加
          for (let i = 0; i < offset; i++) {
            draft.cardList.push({
              Id: nanoid(),
              src: defaultImage,
              pageName: '',
              url: '',
              activityList: [],
              activityName: '',
              title: lang.pagestyle_input_main_title,
              desc: lang.textimage_content_text_placeholder,
              titleColor: '#000000',
              descColor: '#000000',
              showCover: true,
              coverColor: '#2F54EB'
            });
          }
        }
        if (offset < 0) {//若卡片减少
          draft.cardList = draft.cardList.slice(0, val.value);
        }
        draft.layout.cardNum = val.value;//修改脚本卡片数量
      }
    );
  };

2、问题修改&代码

解决：在切换中英文的时候，重新初始化一遍脚本

  useEffect(() => {
    // 卡片数量变化重新初始化一遍脚本
    // 场景一：当前环境下切换卡片数量
    // 场景二：中英文环境设置卡片数量不一致，切换中英文时需要初始化一遍脚本，获取准确的dom节点数量
    onChange((draft) => {}, { recallScript: true });
  }, [value.layout.cardNum]);

i. useEffect在value.layout.cardNum卡片数量发生变化时执行；

ii. 通过onChange初始化脚本draft，

iii. 并且 recallScript: true，重新执行script

export interface IBasePropChange<T> {
  (
    changeCallBack: (value: Draft<T>) => void,
    options?: {
      recallScript?: boolean;
      reinsertHtml?: boolean;
    }
  ): void;
}
export interface IBaseSettingProps<T> {
  value: T;
  onChange: IBasePropChange<T>;
}

五、附录 useEffect的用法

1、不传递参数

useEffect不传递第二个参数会导致每次渲染都会运行useEffect。

useEffect(()=>{\
console.log(props.number)\
setNumber(props.number)\
}) //所有更新都执行

2、传递空数组

useEffect(()=>{\
console.log(props)\
},[]) //仅在挂载和卸载的时候执行

3、传递一个值

useEffect(()=>{\
console.log(count)\
},[count]) //count更新时执行