React/Redux使用ReactFlow时新增元素替换而非追加到状态数组问题

问题根因 #

你在Reducer的ADD_ELEMENT分支中，每次更新都基于初始状态initialState操作，而非当前已有的状态state：

• 展开的是...initialState而非当前state
• 拼接数组用的是initialState.elements（永远是空数组），而非当前已存储了旧元素的state.elements
  所以每次新增元素都会清空之前的数组，只保留最新添加的单个元素。

修复方案 #

修改Reducer的对应逻辑即可：

import * as types from '../actions/types';

const initialState = {
  elements: [],
  currentElement: undefined,
};

const flow = (state = initialState, action) => {
  switch (action.type) {
    case types.ADD_ELEMENT:
      return {
        // 展开当前state而非initialState
        ...state,
        // 用当前state的elements数组拼接新元素
        elements: state.elements.concat(action.payload),
        // 或者用扩展运算符：elements: [...state.elements, action.payload],
      };
    // 补充default分支返回原state，避免Redux触发警告
    default:
      return state;
  }
}

额外优化建议 #

你现在的拖拽逻辑中同时维护了两套元素状态：一套是Redux的全局状态，一套是本地的setElements状态，后续容易出现两边数据不一致的问题。建议统一使用Redux的状态作为ReactFlow的elements数据源，去掉本地的setElements操作。

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