React切换下拉选项时PanelCode数组修改值丢失问题求助

看起来你遇到的核心问题是直接修改了props中的数据，且组件状态没有正确维护Panel的更新值，导致切换下拉选项时，之前的修改因为依赖原始props数据而丢失。

问题根源拆解 #

1. React中props是只读的，你直接修改this.props.pointModel.Panel[name][this.state.selectedIndex]的做法不符合React单向数据流原则，这种修改既不会触发组件重渲染，也无法被组件状态追踪。
2. 切换availablePanels时，你在onChangeSelectedPanelDropdown里又从this.props.pointModel（原始未修改数据）中获取tempPanelCode，而非从已更新的组件状态中取值，导致之前的修改被覆盖。
3. 组件状态仅通过tempPanelCode维护了当前选中项的值，没有把Panel.PanelCode整个数组的更新同步到state中，无法完整追踪所有修改。

具体修复步骤 #

1. 初始化时完整复制Panel数据到组件state

在构造函数里，把整个Panel对象深拷贝到state中，确保组件拥有自己的可修改状态，不再依赖props的原始数据：

constructor(props) {
  super(props);
  // 深拷贝props中的Panel，避免直接修改props
  const panel = JSON.parse(JSON.stringify(props.pointModel.Panel));
  this.state = {
    ...this.props.pointModel,
    availablePanels: [],
    selectedIndex: 0,
    selectedPanel: null,
    Panel: panel, // 将Panel纳入组件state管理
    tempPanelCode: panel.PanelCode[0] ?? 0 // 从state的Panel取初始值
  };
}

2. 修改onChangeDropdown，更新state中的Panel数组

不再直接修改props，而是更新state里的Panel，确保所有修改都被状态追踪：

onChangeDropdown = (e) => {
  const { target } = e;
  const { name, value } = target;
  const newValue = parseInt(value);
  
  this.props.triggerNeedSave();
  
  // 复制当前PanelCode数组，修改对应索引的值
  const updatedPanelCode = [...this.state.Panel.PanelCode];
  updatedPanelCode[this.state.selectedIndex] = newValue;
  
  this.setState(prevState => ({
    Panel: {
      ...prevState.Panel,
      PanelCode: updatedPanelCode
    },
    tempPanelCode: newValue
  }), () => {
    console.log("Updated Panel state:", this.state.Panel);
  });
};

3. 切换availablePanels时，从state的Panel获取值

在onChangeSelectedPanelDropdown里，从组件自己的state中取对应索引的值，不再依赖props的原始数据：

onChangeSelectedPanelDropdown = (e) => {
  const { target } = e;
  const { name, value } = target;
  const selectedValue = parseInt(value);
  const indexVal = this.state.Panel.PanelCode.indexOf(selectedValue);
  
  this.setState({
    [name]: selectedValue,
    selectedIndex: indexVal,
    tempPanelCode: this.state.Panel.PanelCode[indexVal] ?? 0 // 从state的Panel取当前值
  });
};

4. 保存时提交state中的Panel数据

当需要保存数据到后端时，把组件state里的Panel传给父组件（而非使用props的原始数据），确保提交的是最新修改后的数据。

额外优化建议 #

• 如果你的Panel数据结构复杂，建议使用Lodash的cloneDeep替代JSON.parse(JSON.stringify())进行深拷贝，避免潜在的序列化问题。
• 简化getAvaialablePanels里的下拉选项构造逻辑，无需额外维护中间数组：

let dropOptions = data.map(item => ({
  key: item.OptionKey,
  value: item.OptionKey,
  label: item.OptionCode
}));

这样修改后，组件状态会完整维护Panel.PanelCode的所有更新，切换下拉选项时不会再丢失之前的修改，同时完全遵循React的单向数据流原则。

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