React UI 不会随着状态变化而更新

Question

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

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')
);

Answer 1

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;
}