React同类型重复组件行为不符合预期问题排查

你遇到的问题核心是JavaScript引用类型的特性：数组属于引用类型，MainPage里的this.state.array传给两个Sorting组件时，两个组件拿到的是同一个数组的内存引用。不管哪个组件对这个数组做修改（比如排序），都会直接改动原数组，导致另一个组件的状态同步变化——这和React的key无关，key只是用来帮助React识别列表元素、解决组件复用问题，管不了引用共享的问题。

1. 给每个Sorting组件传递独立的数组副本 #

在MainPage的map渲染部分，把直接传递原数组改成传递数组的浅拷贝，让每个子组件拿到的都是独立的数组：

{this.state.temp.map((e) => (<Sorting key={e} id={e} array={[...this.state.array]} />))}

（另外你的key写法有误，key={{e}}会生成固定字符串"{e}"，直接写key={e}即可，因为e是唯一的1和2）

2. 让Sorting组件基于传入的props初始化自身状态 #

当前Sorting组件的constructor里array是空数组，没有用到传入的props.array，需要修正：

class Sorting extends Component { // 注意组件名首字母大写，符合React规范
  constructor(props) {
    super(props);
    this.state = {
      array: [...this.props.array], // 用props的数组副本初始化自身状态
      bars: NumberOfBars,
      firstSelection: "Insertion",
      btn: false,
      dual: true,
    };
    this.fillArray = this.fillArray.bind(this);
    this.bubbleSort = this.bubbleSort.bind(this); // 别忘了绑定排序方法
  }

  // 额外处理：当父组件重置数组时，子组件同步更新自身状态
  componentDidUpdate(prevProps) {
    if (prevProps.array !== this.props.array) {
      this.setState({ array: [...this.props.array] });
    }
  }

  // 示例：正确的排序方法，操作自身state的数组副本
  bubbleSort() {
    // 先拷贝当前state的数组，避免直接修改原数组
    const newArray = [...this.state.array];
    // 这里写你的冒泡排序逻辑，比如：
    for (let i = 0; i < newArray.length; i++) {
      for (let j = 0; j < newArray.length - i - 1; j++) {
        if (newArray[j] > newArray[j + 1]) {
          [newArray[j], newArray[j + 1]] = [newArray[j + 1], newArray[j]];
        }
      }
    }
    // 更新自身state
    this.setState({ array: newArray });
  }

  // 重置方法也要基于props的最新数组
  fillArray() {
    this.setState({ array: [...this.props.array] });
  }

  render() {
    // ... 原渲染代码不变
  }
}

3. 确保Sorting组件的修改只针对自身state #

所有排序、重置操作，都要操作组件自身state里的数组，绝对不能直接修改props里的数组（React中props是只读的，直接修改会导致不可预测的状态混乱）。

这样修改后，两个Sorting组件就拥有了独立的数组状态，点击各自的排序按钮只会修改自己的数组，不会影响另一个组件，就能实现排序竞速的效果了。

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