怪异的行为触发事件到父组件修改列表顺序React

在子组件中定义一个函数，当发生需要修改列表顺序的行为时，触发该函数并传递需要改变的数据。在父组件中监听该函数并更新列表顺序。

子组件示例代码：

import React from 'react';

function ListItem(props) {
  const { itemData, onListOrderChange } = props;

  // 当需要交换列表顺序时，触发该函数并传递需要交换的数据
  function handleOrderChange(direction) {
    onListOrderChange(itemData.id, direction);
  }

  return (
    <div>
      <span>{itemData.id}</span>
      <span>{itemData.name}</span>
      <button onClick={() => handleOrderChange('up')}>上移</button>
      <button onClick={() => handleOrderChange('down')}>下移</button>
    </div>
  );
}

export default ListItem;

父组件示例代码:

import React, { useState } from 'react';
import ListItem from './ListItem';

function ListContainer() {
  const [listData, setListData] = useState([
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' },
  ]);

  // 监听子组件触发的事件，根据传递的数据更新列表顺序
  function handleListOrderChange(itemId, direction) {
    const itemIndex = listData.findIndex((item) => item.id === itemId);
    const targetIndex =
      direction === 'up' ? itemIndex - 1 : itemIndex + 1;

    if (targetIndex < 0 || targetIndex >= listData.length) {
      return;
    }

    const newListData = [...listData];
    [newListData[itemIndex], newListData[targetIndex]] = [
      newListData[targetIndex],
      newListData[itemIndex],
    ];
    setListData(newListData);
  }

  return (
    <div>
      {listData.map((item) => (
        <ListItem