使用Redux与react-flow-renderer时报错updateElement不是函数如何解决？

• Action函数解构错误：React函数组件的第一个参数为接收的所有props集合，第二个参数仅在搭配forwardRef使用时接收ref对象，普通场景下为undefined。你定义VPCNodeModal组件时，错误将updateElement放在第二个参数位置解构，最终拿到的updateElement是undefined，调用时就会抛出“不是函数”的错误。
• 变量未定义遗漏：代码中使用的selectedElement没有声明或作为prop传入，修复函数问题后还会触发该变量未定义的报错。

1. 修正组件参数解构 #

将updateElement从第一个props参数中解构，调整组件声明部分代码即可：

// 原错误写法
// const VPCNodeModal = (props, { updateElement }) => {

// 修正后的写法
const VPCNodeModal = (props) => {
  // 从props中解构出connect注入的updateElement，以及父组件传入的选中节点
  const { updateElement, selectedElement } = props;
  // 原有其他逻辑保持不变

2. 补全选中节点传参逻辑 #

你需要在父组件调用VPCNodeModal时，将当前点击的节点数据作为selectedElement prop传入组件，同时补充对应的prop校验：

VPCNodeModal.propTypes = {
  updateElement: PropTypes.func.isRequired,
  // 可根据你的实际节点类型调整校验规则
  selectedElement: PropTypes.object.isRequired
};

修改完成后重新运行即可正常调用updateElement方法，提交表单后会触发Redux更新对应节点的options属性。

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