React+Redux子组件向父组件传值不全问题求助

看起来你遇到的核心问题是子组件的更新无法完全同步到父组件，导致保存时数据不完整。我梳理了代码里的几个关键问题，逐一给你说明：

1. 直接修改Props（React严格禁止的操作） #

在父组件的handleSaveButton方法里，你直接操作了this.props.storyboardList.boardList[selectedBoardId]：

this.props.storyboardList.boardList[selectedBoardId].spcxId === "" ? ...

React中Props是只读的，直接修改props不会触发组件重新渲染，也无法将变更同步到状态管理（比如Redux，如果storyboardList是从store来的）。

修复方案： #

先复制一份props数据，再进行判断和修改：

handleSaveButton = selectedBoardId => {
  const expressionsToSaveWidget = { ...this.getUserAccountRunParams() };
  // 复制一份board数据，避免直接修改props
  const targetBoard = { ...this.props.storyboardList.boardList[selectedBoardId] };
  
  if (targetBoard.spcxId === "") {
    this.props.storyboardActions.newStoryboard(
      expressionsToSaveWidget,
      this.state.storyboardTitle,
      targetBoard
    );
  } else {
    this.props.storyboardActions.updateStoryBoard(
      expressionsToSaveWidget,
      this.state.storyboardTitle,
      targetBoard
    );
  }
};

2. 子组件的updatedWidget没有同步到父组件状态 #

子组件在handelSelectionChange里生成了updatedWidget，但没有调用父组件的回调来更新父组件的widgetsList（你注释掉了handleWidgetChange）。这会导致父组件保存时，用的还是旧的widgetsList数据，新修改的leftTarget/rightTarget等值没有被记录。

修复方案： #

1. 父组件恢复并实现handleWidgetChange方法，用来更新widgetsList：

handleWidgetChange = (updatedWidget) => {
  this.setState(prevState => ({
    widgetsList: prevState.widgetsList.map(widget => 
      widget.widgetId === updatedWidget.widgetId ? updatedWidget : widget
    )
  }));
};

2. 在父组件的VennDiagram组件上传递这个回调：

<VennDiagram
  // ...其他props
  handleWidgetChange={this.handleWidgetChange}
/>

3. 子组件在生成updatedWidget后调用这个回调：

// 子组件handelSelectionChange里，不管是left还是right分支，添加这行
this.props.handleWidgetChange(updatedWidget);

3. 废弃的生命周期componentWillReceiveProps #

componentWillReceiveProps已经被React废弃，而且你当前的比较逻辑有问题：this.props.storyboardList !== nextProps.storyboardList是引用比较，如果storyboardList是对象/数组，即使内容变化但引用没变，这个判断不会触发。

修复方案： #

替换成componentDidUpdate（类组件）：

componentDidUpdate(prevProps) {
  // 浅比较storyboardList的长度或者关键属性，避免不必要的更新
  if (prevProps.storyboardList.length !== this.props.storyboardList.length) {
    this.setState({ storyboardList: this.props.storyboardList });
  }
}

4. getNewWidget里的错误代码 #

在getNewWidget里有一行错误的console：

console.log("stb", this.state.storyboardList.widgetList);

this.state.storyboardList是一个数组（你初始化时是[]），数组没有widgetList属性，这会抛出错误，可能中断后续逻辑执行。

修复方案： #

删除这行错误的console，或者修正为正确的取值（如果需要打印）：

// 如果storyboardList的元素有widgetList，应该遍历或者取指定元素
// console.log("stb", this.state.storyboardList[0]?.widgetList);

5. 异步setState导致保存时机错误 #

子组件在handelSelectionChange里调用this.setState后立刻调用this.props.handleSaveButton，但setState是异步的，此时父组件的状态还没完成更新，保存的可能还是旧数据。

修复方案： #

等子组件的setState完成后再调用保存，或者更合理的是让用户手动触发保存（比如父组件提供保存按钮），而不是每次选择后自动保存。如果必须自动保存，修改子组件代码：

this.setState({ 
  leftValue: Venndata, 
  interSectionData: interSec, 
  lefttext: venntext 
}, () => {
  // setState完成后再调用保存
  this.props.handleSaveButton(this.props.boardId);
});

把这些问题修复后，子组件的更新应该能正确同步到父组件，保存时就能拿到完整的最新数据了。

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