Javascript 响应状态更改时未更新的UI

我有一个列表，需要在单击列表中的任何项目时对其重新排序。字符串数组用于绑定。用于重新排序的函数正在返回正确的值。但是UI没有更新

import React from 'react';
import ReactDOM from 'react-dom';

function swapElement(array, from, to) {
  array.splice(to, 0, array.splice(from, 1)[0])
  return array;
}

const List = props => {
  let [list, setList] = React.useState(props.item)

  const handleClick = index => {
    const items = swapElement(list, index, 0);
    console.log('UPDATED ARRAYS--------->', items)
    setList(items);
  }

  return <ul> {
    list.map((item, i) => 
      <li style={{ margin: '25px' }}
        onClick={() => handleClick(i)}
        key={i}
      >
      {item}
     </li>)
  } </ul>
}

ReactDOM.render(
  <List item={['A', 'B', 'C', 'D', 'E']} />,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
函数交换（数组、从、到）{
数组.拼接（到，0，数组.拼接（从，1）[0]）
返回数组；
}
常量列表=道具=>{
let[list，setList]=React.useState（props.item）
const handleClick=索引=>{
const items=swaplement（列表，索引，0）；
log（'更新的数组---------------->'，项）
设置列表（项目）；
}
返回
{
list.map（（项目，i）=>
handleClick（i）}
key={i}
>
{item}
）
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

UI没有冻结，您正在修改状态对象，并且从不返回新的数组对象引用，因此react不会重新呈现UI

浅层复制数组，然后变异新数组并返回

function swapElement(array, from, to) {
  const newArray = [...array];
  newArray.splice(to, 0, newArray.splice(from, 1)[0])
  return newArray;
}

有趣的事实：您可以使用数组分解来交换数组的两个元素。这避免了拼接时发生的所有数组元素移动

function swapElement(array, from, to) {
  const arr = [...array];
  [arr[from], arr[to]] = [arr[to], arr[from]];
  return arr;
}

---

您的第二个示例非常好，非常适合分享！