React实现累加初始值点击器遇值复用异常问题求解

• 违反React最佳实践：直接将组件实例存储在click state中，渲染时又重新生成Counter组件覆盖，导致组件状态、props传递逻辑完全混乱
• 状态设计缺陷：所有Counter组件共用Redux store中同一个state.ourState.count字段，没有为每个点击器维护独立的数值存储，必然出现值复用问题
• 核心逻辑缺失：新增组件时没有计算现有点击器的数值总和，也没有将初始值传入新组件
• key使用错误：列表渲染用数组索引作为key，增删组件时React会错误复用组件实例，进一步加剧状态错乱
• 渲染逻辑冲突：click数组中存储的全是Counter，渲染时才按位置替换为计时器，数组内容和实际渲染内容不匹配，删除逻辑同步出错

不要在state中存储组件实例，state只保存渲染所需的纯数据，组件在渲染阶段动态生成；同时调整Redux存储结构，为每个点击器维护独立数值。

第一步：调整Redux结构 #

将原来单一的count字段改为存储每个点击器数值的键值对，新增对应操作的action处理逻辑：

// Redux reducer 示例
const initialState = {
  clickerValues: {} // 结构：{ [点击器唯一ID]: 对应数值 }
};

function ourReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT_CLICKER':
      return {
        ...state,
        clickerValues: {
          ...state.clickerValues,
          [action.payload]: (state.clickerValues[action.payload] || 0) + 1
        }
      };
    case 'DECREMENT_CLICKER':
      return {
        ...state,
        clickerValues: {
          ...state.clickerValues,
          [action.payload]: (state.clickerValues[action.payload] || 0) - 1
        }
      };
    case 'INIT_CLICKER':
      return {
        ...state,
        clickerValues: {
          ...state.clickerValues,
          [action.payload.id]: action.payload.initialValue
        }
      };
    case 'REMOVE_CLICKER':
      const newValues = { ...state.clickerValues };
      delete newValues[action.payload];
      return {
        ...state,
        clickerValues: newValues
      };
    default:
      return state;
  }
}

第二步：修正组件实现 #

import { useState, useEffect, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';

// 计时器组件
function NoClicker() {
  const [time, setTime] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => setTime(prev => prev + 1), 1000);
    return () => clearInterval(timer);
  }, []);
  return <div className="timer">计时器：{time}s</div>;
}

// 点击器组件，通过传入的唯一ID读取自身数值
function Counter({ clickerId }) {
  const count = useSelector(state => state.ourState.clickerValues[clickerId] || 0);
  const dispatch = useDispatch();

  return (
    <div className='counter'>
      <button
        className='btnClick'
        onClick={() => dispatch({ type: 'INCREMENT_CLICKER', payload: clickerId })}
      >
        Increment
      </button>
      <h2>{count}</h2>
      <button
        className='btnClick'
        onClick={() => dispatch({ type: 'DECREMENT_CLICKER', payload: clickerId })}
      >
        Decrement
      </button>
    </div>
  );
}

function App() {
  // state只存储点击器的唯一ID列表，不存组件
  const [clickerIds, setClickerIds] = useState([]);
  const dispatch = useDispatch();
  // 全局ID生成器，保证每个点击器ID唯一
  const idSeed = useRef(0);
  // 顶层获取所有点击器的值，符合Hooks调用规则
  const allClickerValues = useSelector(state => state.ourState.clickerValues);

  // 动态生成渲染列表：每3个点击器后插入1个计时器，满足第4位为计时器的规则
  const renderList = [];
  let clickerIndex = 0;
  const totalLength = clickerIds.length + Math.floor(clickerIds.length / 3);
  for (let i = 0; i < totalLength; i++) {
    // 位置从1开始计数，第4、8、12...位渲染计时器
    if ((i + 1) % 4 === 0) {
      renderList.push({ type: 'timer', key: `timer-${i}` });
    } else {
      const currentId = clickerIds[clickerIndex];
      renderList.push({ type: 'clicker', key: `clicker-${currentId}`, id: currentId });
      clickerIndex++;
    }
  }

  function addClicker() {
    // 计算现有所有点击器的数值总和
    const sum = clickerIds.reduce((total, id) => total + (allClickerValues[id] || 0), 0);
    const newId = idSeed.current++;
    // 初始化新点击器的值为总和
    dispatch({
      type: 'INIT_CLICKER',
      payload: { id: newId, initialValue: sum }
    });
    setClickerIds(prev => [...prev, newId]);
  }

  function delClicker() {
    if (clickerIds.length === 0) return;
    const lastClickerId = clickerIds[clickerIds.length - 1];
    // 删除点击器时同步清理store中对应的值
    dispatch({ type: 'REMOVE_CLICKER', payload: lastClickerId });
    setClickerIds(prev => prev.slice(0, -1));
  }

  return (
    <div className='app'>
      <button className='btn' onClick={addClicker}>addClicker</button>
      <button className='btn' onClick={delClicker}>delClicker</button>
      {renderList.map(item => {
        if (item.type === 'timer') return <NoClicker key={item.key} />;
        return <Counter key={item.key} clickerId={item.id} />;
      })}
    </div>
  );
}

关键修复点 #

• 移除「组件存state」的反模式，state仅保存点击器ID的纯数据，组件在渲染阶段动态生成
• 每个Counter通过唯一ID读取Redux中独立的数值，从根源解决多组件共用状态导致的值复用问题
• 新增点击器时提前计算所有现有点击器的数值总和，作为新点击器的初始值写入store，符合需求规则
• 用全局唯一ID作为列表项key，替代数组索引，避免React增删组件时错误复用实例
• 渲染时动态按位置插入计时器，业务state不需要维护计时器无关数据，删除点击器时自动适配渲染规则，逻辑更简洁

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