React状态更新异常求助：添加歌曲时出现重复数据

从你的代码和日志来看，问题的核心是React状态修改时没有遵循不可变性原则，导致多个地方共享同一个对象引用，最终出现状态被意外覆盖、重复数据的问题。具体原因和修复步骤如下：

问题根源 #

1. 直接修改state的引用类型值：在UploadHandlers的handleInputChange中，你直接获取了this.state.songUploadFields的引用并修改它，同时处理genres数组时也直接操作原数组。这种做法会导致：

   • React无法正确追踪状态变化（因为引用没改变，React可能跳过重新渲染）
   • 所有持有该对象/数组引用的地方（比如App组件的songs数组）会同步被修改，出现数据“被覆盖”的假象。

2. reset方法复用污染的初始状态：你定义的initialState是一个外部对象，当你修改this.state.songUploadFields时，因为是引用传递，initialState本身也会被污染。调用reset时，你只是把这个已经被修改的对象重新赋值给state，导致无法真正重置到初始状态。

修复步骤 #

1. 修复UploadHandlers的handleInputChange方法，遵循不可变性 #

修改时创建对象/数组的副本，避免直接操作原state：

handleInputChange = (e) => {
  const name = e.target.name;
  let value = e.target.value;

  // 创建songUploadFields的浅副本，而非直接引用原state对象
  let songUploadFields = {...this.state.songUploadFields};

  /* Title and SongFile are required to enable the upload button */
  if (name === 'title' && value.length > 0) {
    this.setState({uploadButtonToggle: false});
  } else if (name === 'title') {
    this.setState({uploadButtonToggle: true});
  }

  /* Handle genres without modifying original array */
  if (name === 'genres') {
    // 创建genres数组的副本
    let genres = [...this.state.songUploadFields.genres];
    if (!genres.includes(value)) {
      genres.push(value);
      value = genres;
    } else {
      const index = genres.indexOf(value);
      genres.splice(index, 1);
      value = genres;
    }
  } else if (name === 'songFile') {
    value = e.target.files[0];
  }

  // 更新副本对象后再setState
  songUploadFields[name] = value;
  this.setState({songUploadFields});
}

2. 修复reset方法，确保重置为干净的初始状态 #

每次重置时创建新的初始对象，避免复用被污染的引用：

reset = () => {
  this.setState({
    songUploadFields: {
      title: '',
      description: '',
      songFile: [],
      genres: [],
    },
    uploadButtonToggle: true,
  });
}

// 可选优化：把初始状态封装成函数，避免重复代码
// const getInitialState = () => ({
//   songUploadFields: { title: '', description: '', songFile: [], genres: [] },
//   uploadButtonToggle: true
// });
// 初始化state时：state = getInitialState();
// reset时：this.setState(getInitialState());

3. 在App组件的handleUpload中创建数据副本 #

确保添加到songs数组的是新对象，避免后续修改UploadHandlers的state影响已保存的数据：

handleUpload = (songData) => {
  // 创建songData的副本，切断引用关联
  const newSong = {...songData};
  const songs = [...this.state.songs, newSong];
  console.log(songs);
  this.setState({songs});
}

经过这些修改后，每个状态修改都会创建新的对象/数组副本，不会出现引用共享导致的数据覆盖问题，你的上传功能应该就能正常工作了。

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