Redux与ReactFlow集成问题：状态无法正确更新

我帮你梳理下问题出在哪，以及对应的解决方案：

你遇到的两个关键问题：

• 异步更新导致旧数据提交：你在useEffect里调用addNodeIntoStore(nodes)时，setNodes是异步操作，此时props.nodes还没完成更新，传给Redux的自然是旧的节点数据。
• 直接修改原对象引发不可变冲突：你直接修改node.data的方式违反了React和Redux的不可变数据原则，这不仅会让React Flow无法正确识别节点变化，还会在直接push原对象到Redux时触发只读属性的报错。

我们调整逻辑顺序，先基于用户输入构建完整的新节点，同步更新Redux后再更新React Flow的节点列表，全程遵循不可变数据规则：

1. 重构模态框的提交逻辑 #

移除依赖异步更新的useEffect，在提交时直接处理所有更新：

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Modal from 'react-bootstrap/Modal';

import { useDispatch } from 'react-redux';
import { addNode } from '../flow/flowSlice';

function ScenarioModal(props) {
    const [scenarioData, setScenarioData] = useState({
        label: "",
        type: "Current Scenario",
        description: "",
    })

    const dispatch = useDispatch();
    const { nodes, setNodes, nodeId } = props;

    const handleChange = (evt) =>{
        const value = evt.target.value;
        // 使用函数式更新确保状态的正确性
        setScenarioData(prev => ({
            ...prev,
            [evt.target.name] : value
        }));
    }

    const onFormSubmit = e => {
        e.preventDefault();
        
        // 1. 基于原节点数组创建全新的更新后数组（不可变更新）
        const updatedNodes = nodes.map(node => {
            if (node.id === nodeId) {
                // 返回全新的节点对象，不修改原对象
                return {
                    ...node,
                    data: {
                        ...node.data,
                        ...scenarioData
                    }
                };
            }
            return node;
        });

        // 2. 获取更新后的目标节点，dispatch到Redux
        const targetNode = updatedNodes.find(n => n.id === nodeId);
        dispatch(addNode(targetNode));

        // 3. 更新React Flow的节点列表
        setNodes(updatedNodes);

        // 重置表单并关闭模态框
        setScenarioData({
            label:"",
            type: "Current Scenario",
            description: "",
        });
        props.handleClose();
    }

    // ... 模态框的渲染逻辑
}

2. 简化Redux Slice的addNode逻辑 #

因为我们已经在模态框里构建了完整的新节点对象，Slice里只需要做简单的不可变添加即可（Redux Toolkit的Immer会自动处理不可变更新）：

import { createSlice } from '@reduxjs/toolkit';
import _ from 'lodash';

export const flowSlice = createSlice({
    name:'flow',
    initialState : {
        nodes: []
    },
    reducers: {
        addNode: (state, action) => {
            const newNode = action.payload;
            if(!_.isEmpty(newNode)){
                // 直接添加全新的节点对象即可
                state.nodes.push(newNode);
            }
        }
    }
})

export const { addNode } = flowSlice.actions;
export default flowSlice.reducer;

3. 报错原因说明 #

之前用state.nodes.push(action.payload)崩溃，是因为你直接修改了React Flow内部管理的原节点对象，这个对象可能被React Flow标记为只读或冻结。现在我们通过解构创建了完全独立的新对象，就不会触发只读属性的报错了。

现在的执行逻辑变成：

1. 用户在模态框输入数据并提交
2. 基于原节点数组创建新数组，替换目标节点为包含最新data的全新对象
3. 将这个新节点dispatch到Redux，此时payload是最新的用户输入数据
4. 更新React Flow的节点列表，视图同步更新

这样就能保证Redux store里存储的是用户输入的最新数据，同时解决了异步更新带来的旧数据问题。

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