React Context API开发UI列表增删、点击外部隐藏图标问题求助

新增项问题 #

• 你的Context全局只存储了一套Items数组，所有row组件共享该状态，新增操作自然会同步到所有row，这是状态结构设计问题，和Context API本身无关，不需要更换Redux。
• 调整状态结构，按row ID分组存储对应items，同时记录当前选中的row ID：

// 初始状态改造示例
const initialState = {
  Icons: false,
  // 以rowId为key，存储每个row独立的items数组
  rowItems: {},
  activeRowId: null
}

• 新增item时传入选中的row ID，reducer仅更新对应row的items数组即可实现单row新增。

删除单个元素问题 #

• 之前UUID重复生成是因为你把ID生成逻辑放在了组件渲染流程中，正确的生成时机是创建item的时刻（也就是触发ADD_ITEM动作时），生成后将ID和item绑定存储，后续重渲染不会改变。
• ADD_ITEM逻辑改造示例：

import { v4 as uuidv4 } from 'uuid';
const AddItem = (rowId) => {
  const newItem = {
    id: uuidv4(), // 创建时仅生成一次，永久绑定该item
    content: <Item />
  }
  dispatch({
    type: ADD_ITEM,
    payload: { rowId, newItem }
  })
}

• 删除时直接将item所属的row ID和item自身ID传给删除方法，reducer对对应row的items数组做filter过滤即可，不需要额外获取父元素ID。

点击item外部隐藏图标问题 #

• onBlur失效的核心原因是点击操作图标时，item会先触发blur事件将图标隐藏，导致图标的点击事件无法触发。
• 改用全局点击区域判断方案：给document绑定mousedown监听，判断点击目标是否属于item或操作图标区域，仅当点击区域在两者之外时才隐藏图标：

// item组件内逻辑
import { useRef, useEffect } from 'react';
const Item = () => {
  const itemRef = useRef(null);
  const iconRef = useRef(null);
  useEffect(() => {
    const handleOuterClick = (e) => {
      if(!itemRef.current?.contains(e.target) && !iconRef.current?.contains(e.target)) {
        // 点击区域在item和图标外，执行隐藏
        Iconshide();
      }
    }
    document.addEventListener('mousedown', handleOuterClick);
    return () => document.removeEventListener('mousedown', handleOuterClick);
  }, [])
  // 其余组件逻辑
}

• 另外你当前的Icons是全局状态，会控制所有item的图标显隐，建议改造为存储当前激活的item ID，只有ID匹配的item才显示操作图标。

现有代码兼容提示 #

你当前Context中的ADD_ITEM动作传递的参数是Items字段，但reducer中读取的是action.payload，两者不匹配，需要先统一参数规则，否则新增逻辑无法正常执行。

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