React+NextJS删除Stats组件后后续组件状态丢失问题求助

1. 把index替换成唯一标识当key #

• 别用数组index当组件的key，删元素后后续组件的index会变，React会误判成旧组件更新，直接清掉原有状态。
• 给每个Stats实例生成唯一且不变的ID，比如用浏览器自带的crypto.randomUUID()，或者后端返回的唯一标识（有的话优先用）。示例代码：

  // 新增组件时生成ID
  const addStats = () => {
    setStatsList(prev => [...prev, { id: crypto.randomUUID(), filters: {}, results: {} }]);
  };
  
  // 渲染时用id做key
  {statsList.map(item => (
    <StatsComponent key={item.id} data={item} onDelete={() => handleDelete(item.id)} />
  ))}
  

• 这么做之后，删某一项时后续组件的key不会变，React会保留它们的状态，不会乱重渲染。

2. 把memo用对 #

• 确保传给StatsComponent的props引用稳定，别每次父组件渲染都生成新函数或对象。比如用useCallback包删除函数，用useMemo处理传给子组件的数据：

  // 父组件里用useCallback包删除逻辑
  const handleDelete = useCallback((id) => {
    setStatsList(prev => prev.filter(item => item.id !== id));
  }, []);
  
  // 子组件用memo包裹，自定义比较逻辑避免无效重渲染
  const StatsComponent = memo(({ data, onDelete }) => {
    // 组件内部逻辑
  }, (prevProps, nextProps) => {
    // 只比较id、筛选条件、结果是否变化
    return prevProps.data.id === nextProps.data.id && 
           JSON.stringify(prevProps.data.filters) === JSON.stringify(nextProps.data.filters) &&
           JSON.stringify(prevProps.data.results) === JSON.stringify(nextProps.data.results);
  });
  

• 注意：直接传对象的话，父组件每次渲染都会生成新对象，memo直接失效，必须保证props引用稳定。

3. 别把所有状态都提到父组件 #

• 每个Stats的筛选条件尽量存在自己组件内部，父组件只统一存结果数据就行。如果需要同步结果到父组件，只把结果传上去：

  // 子组件内部管筛选条件
  const StatsComponent = memo(({ id, initialResults, onUpdateResults }) => {
    const [filters, setFilters] = useState({});
  
    // 筛选条件变了就计算结果，同步给父组件
    useEffect(() => {
      const newResults = calculateResults(filters);
      onUpdateResults(id, newResults);
    }, [filters, id, onUpdateResults]);
  
    return (
      // 筛选表单和结果展示
    );
  });
  

• 这样父组件只负责组件列表和结果，子组件的筛选状态不受父组件渲染影响，删其他组件时不会触发当前组件重渲染。

4. 新增组件别重复用旧ID #

• 新增组件必须生成全新的唯一ID，绝对不能复用已经删掉的ID。用crypto.randomUUID()基本不会重复；如果自己写生成逻辑，可以结合时间戳加随机数：

  const generateUniqueId = () => {
    return `${Date.now()}-${Math.floor(Math.random() * 10000)}`;
  };
  

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