React中MultiCombobox组件重复渲染两次问题求助

可能的原因及对应解决方案 #

1. 子组件未做渲染优化 #

MultiCombobox作为子组件，默认会跟随父组件的渲染而重新渲染，即使props没有变化。给MultiCombobox添加React.memo包裹，通过浅比较props来减少不必要的重渲染：

import React from 'react';

function MultiCombobox(props) {
  console.log('Init multiCombobox');
  return <div></div>;
}

// 用React.memo包裹，仅在props变化时重新渲染
export default React.memo(MultiCombobox);

2. useMemo依赖项不稳定导致重新执行 #

你的commandModal通过useMemo生成，但依赖数组中的部分项可能频繁变化，触发useMemo重新计算，生成新的JSX结构，进而导致MultiCombobox重新渲染：

• 优化popupSlice的选择逻辑：如果popupSlice是通过useSelector获取的整个slice对象，建议只提取组件需要的字段，避免slice中无关数据变化触发依赖更新：

  // 原写法（可能因无关数据变化触发依赖更新）
  const popupSlice = useSelector(state => state.popup);
  
  // 优化后：仅选择需要的data和configuration
  const { data, configuration } = useSelector(state => ({
    data: state.popup.data,
    configuration: state.popup.configuration
  }));
  // 同时将useMemo的依赖项改为[data, configuration]，而非整个popupSlice
  

• 用useCallback稳定handleSubmit引用：如果handleSubmit是在Popup组件内部定义的函数，每次Popup渲染时都会生成新的函数引用，触发useMemo重新执行。用useCallback包裹它：

  const handleSubmit = useCallback((e) => {
    // 你的提交逻辑
  }, [/* 此处添加handleSubmit的依赖项 */]);
  

3. Props存在引用类型的不稳定值 #

比如selectedValue如果是数组类型，即使内容相同，每次状态更新可能生成新的数组引用，导致MultiCombobox的props变化：

• 传递selectedValue时，用useMemo缓存派生值：

  const selectedValue = useMemo(() => popupSlice.data[column.field], [popupSlice.data, column.field]);
  

• 或者给React.memo自定义比较函数，深度比较数组内容：

  const arePropsEqual = (prevProps, nextProps) => {
    // 比较selectedValue数组内容是否一致
    if (prevProps.selectedValue.length !== nextProps.selectedValue.length) return false;
    for (let i = 0; i < prevProps.selectedValue.length; i++) {
      if (prevProps.selectedValue[i] !== nextProps.selectedValue[i]) return false;
    }
    // 比较其他基础类型props
    return prevProps.url === nextProps.url &&
           prevProps.validate === nextProps.validate;
  };
  
  export default React.memo(MultiCombobox, arePropsEqual);
  

4. 排查父组件Popup的渲染次数 #

在Popup组件的函数开头添加console.log('Popup渲染')，确认Popup本身是否重复渲染。如果Popup渲染两次，需要排查它的父组件或自身的state、props变化原因，比如是否存在不必要的state更新逻辑。

内容的提问来源于stack exchange，提问作者nguyen nguyen