React中更新数组为新数组后DOM未重新渲染问题求助

核心问题分析 #

1. 状态更新函数调用错误：渲染逻辑依赖optionsCategory状态，但点击事件里调用的是setOptionsService，导致需要更新的optionsCategory状态未发生变化，DOM自然不会重新渲染。
2. 异步状态更新误解：console.log([optionsCategory])打印的是更新前的旧值，因为React状态更新是异步批量处理的，同步打印无法获取最新状态。

修正后的代码 #

点击事件处理函数 #

const handleCategoryClick = async (e: React.MouseEvent<HTMLDivElement>, c: Category) => {
  if (c.subCategories.length > 0) {
    // 修正：调用对应optionsCategory的状态更新函数
    setOptionsCategory([...c.subCategories]);
  } else {
    setIsCategory(true);
    const data = await onActsByServiceIdAndCategoryId(serviceId, c.id);
    setActs([...data]);
  }
};

渲染部分（优化key值） #

{optionsCategory.map((c) => (
  <div className="content" key={c.id} onClick={(e) => handleCategoryClick(e, c)}>
    {c.name}
  </div>
))}

额外建议 #

• 验证状态更新：若需确认状态是否正确更新，使用useEffect监听状态变化：

import { useEffect } from 'react';

useEffect(() => {
  console.log('optionsCategory已更新:', optionsCategory);
}, [optionsCategory]);

• 避免用index作为key：当数组元素替换或顺序变化时，index作为key会导致React复用错误DOM节点，建议使用分类的唯一标识（如c.id）作为key，提升渲染性能和准确性。

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